webpack.NormalModuleReplacementPluginを使用してオプションの条件付きファイルを読み込む方法

Question

私が達成しようとしていることは、Webアプリケーションとコードバスアプリケーション用の単一のコードベースを持つことです。

- components 
    - component1.js 
    - component2.js 
    - component2.cordova.js 

は、理想的には私はコンポーネントをインポートどこだけimport Component2 from 'component2'を引き続き使用する：

私はこのようになりますフォルダ/ファイル構造を持っていると思います。

ビルドごとに別々のwebpack.configファイルを用意していますので、最初にcomponent1.cordova.jsを探してcordova webpack設定を取得できたら、component1.jsにフォールバックしてください。

コルドバのバージョンを探して行うことができますwebpack.NormalModuleReplacementPluginのように思えるが、私はそれが存在しないcomponent1.jscomponent1.cordova.js場合にフォールバックすることができどのように/かどうかはわかりません。

Answer 1

私は同じ問題を抱えていた、これは私のソリューションです：

const fs = require('fs'); 
const path = require('path'); 
... 
new webpack.NormalModuleReplacementPlugin(/\.ts$/, function(resource) { 
    if (!resource.request.endsWith('.cordova.ts')) { 
     var file_for_cordova = resource.request.replace(/\.ts$/, '.cordova.ts'); 
     if (fs.existsSync(path.resolve(resource.context, file_for_cordova))){ 
      resource.request = file_for_cordova; 
      } 
     } 
}), 

私はプラグインが必要とされていないと信じて、私はそれはまだ完璧ではない、と思うと、あなたはそれを

Answer 2

を向上させることができます。

resolve: { 
     root: [SRC_PATH, NODE_MODULES_PATH], 
     fallback: NODE_MODULES_PATH,   
     extensions: ['.cordova.js','.js'], 
} 

キーがextensions PARAMです：

は、ここであなたがする必要があるものです。あなたが気付いたかもしれないように、拡張は指定された順序で探査されます。あなたが明示的に.jsファイルのいずれかを必要とする必要があるか、完全なファイル名を指定する必要があり.cordova.js場合

、例えば：require('components/c1.cordova.js')

注：resolveは、configオブジェクトのルートです。

ここで答えは終了しますが、もっと多くのことがあります。

resolve.rootのparamの追加ボーナスは、あなたが今、代わりにもちろん厄介../../../

のSRC_PATHへの相対パスを使用してインポートすることができるということです、あなたはNODE_MODULES_PATHとSRC_PATHは、事前に定義されている必要があります。

import c from 'components/component1'; 

または

var c = require('components/component1')