web-dev-qa-db-ja.com

動的ディレクトリからwebpackを使用してJavaScriptを要求する方法

Webpackをバンドラーとして使用しているアプリケーションに取り込む必要がある、昔ながらのプレーンで古いES5 JavaScriptがいくつかあります。問題は、これらのファイルの場所がパスが動的なフォルダー内にあることです。 webpackはrequire内の式ではうまく機能せず、_require.context_ではまったく許可されないようです。

既知のパスディレクトリがディレクトリおよびそのサブディレクトリ内のすべてのファイルを必要とする場合、このアプローチ正常に動作します：

let domainRequires = require.context('./app/domain', true, /\.js$/); domainRequires.keys().forEach(domainRequires);

_require.context_で式を使用できないため、プレーンrequireを使用してみましたが、それは動作していませんです。

require('../../path/to/code/my-library-' + versionNumber + '/domain/clazz.js');

完全な相対パスを使用します。

また、_require.context_を使用しようとしましたが、正規表現部分を拡張して機能させ、運がありませんでした：

require.context('../../path/to/code', true, /^my-library-.*\/domain\/.*\.js$/);

どんな考え、提案、または解決策も歓迎されます。 webpackでサードパーティのものを使用する必要がある場合も、それで問題ありません。

webpackrequire
22
Alex White

私はこれを理解することになりました。 webpack _resolve.alias_を使用して、次を追加できます。

_resolve: {
  alias: {
    common: path.resolve(__dirname, '../../path/to/code/my-library-' + versionNumber + '/domain')
  }
}
_

_webpack.config_で。

次に、私のコードで、_/domain_ viaの下にあるすべてのファイルを要求できます。

_var commonRequires = require.context('common', true, /\.js$/);
commonRequires.keys().forEach(commonRequires);
_

同様に、次の方法で単一のファイルを取得できます。

_require('common/clazz.js'); // ../../path/to/code/my-library-1.0.0/domain/clazz.js
_

FWIW、versionNumberを取得するには、ノードのfsモジュールを使用してjsonファイルから読み取り、JSON.parse(file)を使用して、_webpack.config_の上部にあるバージョンを取得しました

16
Alex White

Webpack 3.9（と思う）からcommonRequiresは必要ありません。 webpack.config.jsでこれを実行します。

resolve: {
  alias: {
    tmpDir: path.resolve(__dirname, '/tmp')
  }
}

次に、カスタムモジュールを次のようにロードします。

const dynModule = require('tmpDir/dyn_module.js');

あなたの要件から何かを見逃しているかどうかはわかりませんが、commonRequiresは私には必要ではなく、Webpackはこれをうまくビルドします（そして動作します）。

0
Anders