ホームページ > ウェブフロントエンド > jsチュートリアル > パッケージの依存関係を修正する

パッケージの依存関係を修正する

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2024-07-19 19:43:32
オリジナル
380 人が閲覧しました

Fixing Package Dependencies

Embroider と pnpm は両方とも、パッケージが依存関係を正しく宣言することを要求します。依存関係が使用されている場合は、依存関係をリストします (使用されている場合のみ)。

yarn@v1 を使用する大規模なモノリポジトリ (多くの Ember アドオンと Node パッケージを含む Ember アプリを考えてください) で作業する場合、これを行うのは困難です。 Ember アプリは、依存関係が欠落している場合でも、別のパッケージから取り込まれていればビルドして実行できるため、開発者は package.json の更新を忘れる可能性があります。

したがって、ビルドも実行も、一部のパッケージがその依存関係を正しく宣言していないかどうかを知ることはできません。 Embroider と pnpm を導入できるように、package.json を修正するには他にどのようにすればよいでしょうか?

1. 静的コード分析

ファイルが与えられると、JavaScript と Ember がどのように機能するかを知っているため、どの依存関係が存在する必要があるのか​​がわかります。

たとえば、JavaScript (または TypeScript) ファイルを表示する場合、

import { setupIntl } from 'ember-intl/test-support';
import { setupRenderingTest as upstreamSetupRenderingTest } from 'ember-qunit';

export function setupRenderingTest(hooks, options) {
  upstreamSetupRenderingTest(hooks, options);

  // Additional setup for rendering tests can be done here.
  setupIntl(hooks, 'de-de');
}
ログイン後にコピー

import ステートメントから、パッケージが ember-intl と ember-qunit に依存していることがわかります。

そして、テンプレート ファイルが表示される場合は、

{{page-title "My App"}}

<WelcomePage />

{{outlet}}
ログイン後にコピー

Ember とそのアドオン エコシステムに関する知識により、それぞれ ember-page-title、ember-welcome-page、ember-source にたどり着きます。暗黙的な場合でも (例: 二重中括弧のあいまいさ、モジュール解決、サービス インジェクション)、Ember の強力な規則のおかげで、アセットの起源を高精度で推測できます。

2. コードモッド

それでも、すべてのパッケージ内のすべてのファイルを手動でチェックするべきではありません。これには時間がかかり、エラーが発生しやすくなります。

代わりに、@codemod-utils を使用して codemod (実際にはリンター) を作成します。すべてのパッケージについて、codemod は関連するものを解析し、存在する必要がある (「実際の」) 依存関係のリストを作成します。次に、そのリストを package.json ("expected") のリストと比較します。

暗黙的コードを分析するには、既知のアセットのリスト (1 回限りの作成) が必要です。これは、考慮したいすべてのパッケージをそのアセットにマッピングします。マップを使用してその情報を記録できます。

const KNOWN_ASSETS = new Map([
  [
    'ember-intl',
    {
      helpers: [
        'format-date',
        'format-list',
        'format-message',
        'format-number',
        'format-relative',
        'format-time',
        't',
      ],
      services: ['intl'],
    },
  ],
  [
    'ember-page-title',
    {
      helpers: ['page-title'],
      services: ['page-title'],
    },
  ],
  [
    'ember-welcome-page',
    {
      components: ['welcome-page'],
    },
  ],
]);
ログイン後にコピー

Ember の仕組みにより、インポート ステートメントを単純に分析すると誤検知が発生する可能性があります。次の例を見てみましょう:

import Route from '@ember/routing/route';
import fetch from 'fetch';
ログイン後にコピー

正しいコンテキストを提供しない場合 (つまり、このコードは Ember 用です)、codemod は、ember-source と (おそらく) ember-fetch の代わりに、@ember/routing と fetch を依存関係として考慮します。 codemod は、誤検知を簡単にチェックできるような方法で分析を提示する必要があります。

// Results for my-package-37

{
  missingDependencies: [
    'ember-asset-loader',
    'ember-truth-helpers'
  ],
  unusedDependencies: [
    '@babel/core',
    'ember-auto-import',
    'ember-cli-babel'
  ],
  unknowns: [
    'Services - host-router (addon/routes/registration.ts)',
  ]
}
ログイン後にコピー

3. 結果

私が (数日で) 構築した codemod は、129 個のパッケージを含む運用リポジトリを 49 秒で分析しました。合計 12,377 個のファイルがありましたが、コードモッドが解析できたのはそのうちの 6,013 個だけ (半分未満) でした。これは、ファイルあたり平均 0.008 秒、パッケージあたり 0.38 秒です!

codemod の作成について詳しくは、@codemod-utils のメイン チュートリアルをご覧ください。

以上がパッケージの依存関係を修正するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート