☰

moment.js が webpack でロケールをロードしないようにするにはどうすればよいですか? 質問する

tag-icon • tag-icon javascript gulp momentjs webpack
moment.js が webpack でロケールをロードしないようにするにはどうすればよいですか? 質問する

moment.jswebpack を使用しているときに、すべてのロケール (必要なのは英語だけです) の読み込みを停止する方法はありますか? ソースを確認したところ、 hasModulewebpack の場合は が定義されているため、常にrequire()すべてのロケールを試行しているようです。これを修正するにはプル リクエストが必要であることは間違いありません。しかし、webpack 構成でこれを修正する方法はありますか?

以下は momentjs をロードするための webpack 設定です:

resolve: {
            alias: {
                moment: path.join(__dirname, "src/lib/bower/moment/moment.js")
            },
        },

それから、必要な場所では、 を実行しますrequire('moment')。 これは機能しますが、バンドルに約 250 kB の不要な言語ファイルが追加されます。 また、momentjs と gulp の bower バージョンを使用しています。

また、これが webpack 構成で修正できない場合は、ロケールをロードする関数へのリンクが&& module.exports.loadLocalesここにあります。ステートメントに追加しようとしましたifが、webpack は実際にはそれが機能する方法では機能しないようです。それはrequire何の問題もありません。現在は正規表現を使用していると思いますが、どのように修正すればよいのか本当にわかりません。

ベストアンサー1

コードはディレクトリrequire('./locale/' + name)内のすべてのファイルを使用できますlocale。そのため、webpack はすべてのファイルをバンドル内のモジュールとして含めます。どの言語を使用しているかはわかりません。

バンドルに含めるモジュールに関する詳細情報を webpack に提供するために役立つプラグインが 2 つあります:ContextReplacementPluginと ですIgnorePlugin。

require('./locale/' + name)はコンテキスト(式を含む require)と呼ばれます。webpack はこのコード フラグメントからいくつかの情報を推測します: ディレクトリと正規表現。ここでは: directory = ".../moment/locale" regular expression = /^.*$/。したがって、デフォルトではlocaleディレクトリ内のすべてのファイルが含まれます。

推論された情報を上書きすることContextReplacementPluginができます。つまり、新しい正規表現を提供します（含める言語を選択するため）。

別の方法としては、 で require を無視する方法がありますIgnorePlugin。

次に例を示します。

var webpack = require("webpack");
module.exports = {
  // ...
  plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)
    // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
};

おすすめ記事