次のようなモジュールがあります。
let Info = {};
Info.VALUE_ONE = 123;
Info.VALUE_TWO = 456;
Info.VALUE_THREE = 789;
module.exports = Info;
このモジュールがコンパイルされた後、コードから完全に消えて、値123、456、および789が適切な場所にインライン化されるようにしたい-Webpackでこれを行うにはどうすればよいですか?
回答 2 件
webpack.DefinePlugin
を使用したいようです 、コンパイル時にグローバル値をインライン化できます。webpack.config.js
plugins: [ new webpack.DefinePlugin({ Info: require('./info.js'), }), //... ]
例として、ソースコードは次のように変換されます。
ソース
let value = null; switch (value) { case Info.VALUE_ONE: //... case Info.VALUE_TWO: //... case Info.VALUE_THREE: //... default: //... }
出力
let value = null; switch (value) { case 123: //... case 456: //... case 789: //... default: //... }
関連記事
- mvvmを使用してkotlinandroidのハッシュマップ内のオブジェクトから値を取得する方法
- 複数のフィールドで値が欠落しているデータセットフィールドの結合
- 値をオブジェクトにマージする
- 値を条件付きの別のデータフレームの他の値に置き換えます。他の値は変更されません。
- getall()の空の値を保持/ Scrapyに置き換えます
- Djangoは、モデルに一意の値を持つ2つのフィールドを設定しました
- pandas dfにドロップせずに、1つの列を除くpandasの列値を置き換えます
- 文字列値のあるフィールドのみを残す
- 行全体(各列)にNaN値がある場合にのみ、パンダの行を次の行に置き換えます
- ReadFromJsonAsyncは、Null値を持つオブジェクトプロパティを返します
1つの解決策は、string-replace-loaderを使用して
Info.<key>
をインライン化することです。<value>
へ 。次に、モジュール自体を削除するには、2つのオプションがあります。オプション1:commonjs構文を保持し、null-loaderを使用してモジュールを空のオブジェクトに変換します。この方法の注意点は、webpackが
require
を安全に想定しているため、モジュールへの参照を削除する方法がないことです。 ステートメント自体が副作用を引き起こす可能性があります1オプション2:es6インポートおよびエクスポートの使用を開始し、webpackのmodule-concatenation-pluginを使用します。これにより、info.jsがコンシューマと同じスコープに配置され、ミニファイヤがコードを削除できるようになります(
Info
への参照がないため) オブジェクト)。また、esmを使用してnpx webpack -r esm
経由でwebpack構成ファイルをロードする必要があります。次のディレクトリ構造が与えられた場合:
このコードは、あなたが探しているものを提供するはずです(私はそれらを折りたたみ可能にするためにコードスニペット構文を使用しました-コードは実行できません)
オプション1のコード
オプション2のコード
副作用1