修復包依賴關係-js教程-PHP中文網

修復包依賴關係

WBOY

發布： 2024-07-19 19:43:32

原創

330 人瀏覽過

Fixing Package Dependencies

Embroider 和 pnpm 都要求套件正確聲明其依賴項：列出依賴項（當且僅）如果使用了它。

在使用yarn@v1的大型單一儲存庫（考慮帶有許多Ember插件和Node套件的Ember應用程式）時很難做到這一點。開發人員可能會忘記更新 package.json，因為即使缺少依賴項，Ember 應用程式也可以建置和運行，只要從另一個套件中拉入即可。

因此，建置和運行都無法告訴我們某個套件是否未正確聲明其依賴項。我們還能如何修復 package.json 以便引入 Embroidery 和 pnpm？

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（實際上是一個linter）。對於每個套件，codemod 都會解析相關內容並建立應該存在的依賴項清單（「實際」）。然後，它將清單與 package.json 中的清單進行比較（「預期」）。

要分析隱式程式碼，需要有一個已知資產清單（一次性建立），它將我們想要考慮的每個套件對應到其資產。我們可以使用 Map 來記錄這些資訊。

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 語句的簡單分析可能會導致誤報。舉例：

import Route from '@ember/routing/route';
import fetch from 'fetch';

登入後複製

當我們不提供正確的上下文時（即此程式碼適用於 Ember），codemod 會將 @ember/routing 和 fetch 視為依賴項，而不是 ember-source 和（可能）ember-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)',
  ]
}

登入後複製