如何使用動態目錄中的webpack使用JavaScript

我有一些舊式普通舊式ES5 JavaScript，我需要將它引入使用webpack作爲捆綁軟件的應用程序。問題是這些文件的位置在路徑爲動態的文件夾中。看起來webpack在require和require.context完全不允許它們的表達式不能很好地工作。如何使用動態目錄中的webpack使用JavaScript

對於已知路徑目錄需要在目錄中的所有文件和子目錄，這種方法正常工作：

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的第三方，那也沒關係。

來源

2016-11-04 Alex White

我最終弄清楚了這一點。通過使用的WebPack resolve.alias，我可以添加：

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

在webpack.config。

然後在我的代碼，我可以通過要求的所有文件/domain下：

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

來源

2016-11-10 21:18:27

如果您有多個動態變量會怎麼樣？我需要從循環中請求。這是一個真正的痛苦。不知道他們爲什麼如此難以實現...... – tylik

該解決方案確實需要循環。請參閱forEach。 @tylik –

From Webpack 3.9（我認爲）不需要commonRequires。我在webpack.config.js運行此：

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

然後我打開我的自定義模塊：

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

不知道如果我錯過了什麼，從你的要求，但不需要爲我commonRequires和Webpack構建這個很好（並且它工作）。

來源

2017-12-13 13:01:05 Anders

嗨@安德斯，你是對的。「commonRequires」與解決方案根本無關（我從來沒有打算用這種方式解釋它）。這只是要求處於動態路徑的目錄中的所有文件的示例。如果你回頭看看接受的答案，你可以看到我也注意到：「同樣，我可以通過......獲得單個文件」 –

如何使用動態目錄中的webpack使用JavaScript

回答

相關問題