1

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 パッケージで管理し、ビルド時にすべての動的インポート設定を処理してから、消費者がgetTranslation言語と名前空間のそれぞれのアプリでゲッター (この場合) を呼び出すことができるようにすることです。実行時にペイロードを取得するという選択。

この GH スレッドに基づいて、ロケールdistパスをpackage.json

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

たとえば、その構成に基づいてパッケージを公開するとexports、消費者は、ゲッターが呼び出されたときに相対パスまたはパッケージ名プレフィックスのいずれかのパスを調整する方法を知っています

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 でインストールされたパッケージを介してバンドルに含めることができるようにする簡単な方法はありますか?

これが私の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",
      },
    ],
  },
};
4

1 に答える 1