web-dev-qa-db-ja.com

moment.jsがwebpackでロケールをロードしないようにする方法は？

こんにちは、webpackを使用しているときにmoment.jsがすべてのロケール（私は英語が必要です）をロードしないようにすることができますか？ソースを見ていると、webpack用のhasModuleが定義されている場合、常にすべてのロケールをrequire（）しようとしているようです。これを修正するにはプルリクエストが必要だと確信しています。しかし、とにかくこれをwebpack configで修正できますか。

ここにmomentjsをロードするための私のwebpack設定があります

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

それから私はそれを必要とする場所で私は単にrequire（ 'moment'）しますが、それは私のバンドルに約250kbの不要な言語ファイルを追加します。また、mowerjsとgulpのbowerバージョンを使用しています。

また、これがwebpack構成によって修正できない場合は、ロケールをロードする関数へのリンクがあります https://github.com/moment/moment/blob/develop/moment.js#L760- L772 ifステートメントに「&& module.exports.loadLocales」を追加しようとしましたが、今では正規表現を使用していると思っても、webpackがうまく機能しないようです。それを修正する方法を本当に知っている。とにかく助けてくれてありがとう。

javascriptgulpmomentjswebpack
193
epelc

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

2つのプラグイン があり、これはwebpackにバンドルに含めるモジュールに関する詳細情報を提供するのに役立ちます：ContextReplacementPluginおよびIgnorePlugin。

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

ContextReplacementPluginにより、推論された情報をオーバーライドできます。つまり、新しい正規表現を提供できます（組み込みたい言語を選択するため）。

別のアプローチは、IgnorePluginでrequireを無視することです。

以下に例を示します。

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

私たちのプロジェクトでは、import moment from 'moment/src/moment';のような瞬間を含めています。これでうまくいくようです。ただし、モーメントの使用方法は非常に単純なので、SDKに矛盾があるかどうかはわかりません。 WebPackはロケールファイルを静的に見つける方法を知らないため、これが機能すると思うので、警告が表示されます（moment/src/lib/locale/localeに空のフォルダを追加することで簡単に非表示になります）。

7
Adam McCormick

webpack2と最近のバージョンで次のことができます。

import {fn as moment} from 'moment'

そして、webpack.config.jsで次のことを行います。

resolve: {
    packageMains: ['jsnext:main', 'main']
}
2
Kevin

適切なモジュラーmomentライブラリは、ある時点で バージョン になるので、現在--ejectなしでangle-cliを使用しているので、 https://github.com/ ksloan/moment-mini like import * as moment from 'moment-mini';

2
Kuncevič

Adam McCrmickの答えに基づいて、あなたは近くにいて、エイリアスを次のように変更しました。

resolve: {
    alias: {
        moment: 'moment/src/moment'
    },
},
2
bigopon