Package.json 導出 webpack 5 - 找不到動態導入的模塊

Question

我在協調 i18n 語言環境的動態導入路徑時遇到了一些麻煩。 這是相關代碼 -

function getLoader(
  lang: SupportedLanguage,
  ns: SupportedNamespace
): NamespaceLoader | undefined {
  const matrixToCheck = UNSUPPORTED_MATRIX[ns];
  const isSupported = matrixToCheck && matrixToCheck.indexOf(lang) === -1;
  if (isSupported) {
    const path = `./locales/${lang}/${ns}.json`;
    const name = `${lang}_${ns}`;
    const named = {
      [name]: () => import(`${path}`),
    };
    return named[name];
  }
}
...
// eventual output
const SUPPORTED_LANGUAGES = {en: {namespace1: () => import('./locales/en/namespace1.json')}

我的目標是在單個 npm package 中管理所有相關翻譯，在構建時處理所有動態導入設置，然后消費者可以在他們各自的應用程序中為語言和命名空間調用 getter（在這種情況下為getTranslation ）他們選擇在運行時獲取有效負載。

基於這個 GH thread ，我想通過dist package.json區域設置路徑

 ...
 "exports": {
    ".": "./dist/src/main.js",
    "./": "./dist/"
  },
 ...

例如，當我發布 package 時，基於該exports配置，消費者將知道如何在調用 getter 時協調路徑，無論是相對路徑還是包名稱前綴

const fn = () => import('./locales/fr/myNamespace.json')  /// doesn't work
const anotherFn = () => import('@examplePackageName/locales/fr/myNamespace.json') /// doesn't work

由於一切都是動態的，我使用CopyWebpackPlugin將語言環境包含在dist文件夾中。

這在本地按預期工作，但是當我創建dist時，我收到錯誤Error: Module not found./relative/path/to/the/json/I/want.json 。

我的問題：

我錯過了什么？ 有沒有一種簡單的方法來公開這些翻譯，以便其他應用程序可以通過 npm 安裝的 package 將它們包含在它們的包中？

這是我的 Webpack 配置，很高興根據需要提供其他信息

const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const getPlugins = () => {
  return [
    new CleanWebpackPlugin(),
    new CopyPlugin({
      patterns: [{ from: "locales", to: "locales" }],
    }),
  ];
};

module.exports = {
  mode: "production",
  entry: {
    main: "./src/main.ts",
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "src/[name].js",
    chunkFilename: "chunk.[name].js",
    libraryTarget: "commonjs2",
  },

  resolve: {
    extensions: [".json", ".ts", ".js"],
    alias: {
      "@locales": path.resolve(__dirname, "locales/*"),
    },
  },
  plugins: getPlugins(),
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/\.test\.ts$/],
        include: path.join(__dirname, "src"),
        loader: "ts-loader",
      },
    ],
  },
};

Answer 1

導出指令規定明確定義允許導入的所有文件（ 文檔）。 它允許開發人員隱藏內部 package 文件結構。 該指令未導出的內容只能在 package 內部導入，而不能在其外部導入。 它旨在簡化維護。 它允許開發人員重命名文件或更改文件結構，而不必擔心破壞依賴包和應用程序。

因此，如果您想讓內部文件對導入可見，您應該使用 export 指令顯式導出它們，如下所示：

{
  "exports": {
      ".": "./dist/esm/src/main.js",
      "./dist/shared/locale/fr_fr.json": "./dist/shared/locale/fr_fr.json"
  }
}

我不確定 Webpack 是否會處理這種情況，因為它還屬於實驗性功能。 但這就是 Node.js 現在的工作方式。

為什么會這樣

更改應用程序文件結構是 semver 術語的重大變化，因此每次重命名或刪除文件時都需要更新版本。 為了避免這種情況，您可以指定哪些文件是 package 的公共接口的一部分。