1. ホーム
  2. ジャバスクリプト

[解決済み] webpackでmoment.jsがロケールを読み込むのを防ぐにはどうすればよいですか?

2022-04-11 03:54:18

質問

を止める方法はありますか? moment.js webpackを使用しているときに、すべてのロケール(私は英語だけでいい)を読み込まないようにするには?ソースを見ていると、どうやら hasModule が定義されている場合、それはwebpackの場合ですが、常に require() ロケールごとに これはプルリクエストで修正する必要があると思います。しかし、webpack の設定でこれを修正する方法はあるのでしょうか?

以下は、momentjsを読み込むための私のwebpackの設定です。

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

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

また、webpackの設定で直らない場合は、以下のようになります。 ロケールを読み込む関数へのリンクです。 . を追加してみました。 && module.exports.loadLocalesif という文がありますが、実はwebpackはそれがうまくいくような仕組みにはなっていないのでしょう。それはただ require を使用します。今は正規表現を使っていると思うので、どうやって修正するのかさえよくわかりません。

解決方法は?

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

があります。 2つのプラグイン は、どのモジュールをバンドルに含めるべきかについて webpack にもっと情報を与えるのに便利です。 ContextReplacementPluginIgnorePlugin .

require('./locale/' + name) というのは コンテキスト (webpackはこのコード断片からいくつかの情報を推測します。ディレクトリと正規表現です。ここでは directory = ".../moment/locale" regular expression = /^.*$/ . そのため、デフォルトでは locale ディレクトリが含まれます。

は、その ContextReplacementPlugin は、推論された情報を上書きすることができます。つまり、新しい正規表現を指定します (含めたい言語を選択するため)。

もう一つの方法は IgnorePlugin .

以下はその例です。

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