Javascript 使用 webpack 在运行时动态地需要 JS 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30575060/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Require JS files dynamically on runtime using webpack
提问by sra
I am trying to port a library from grunt/requirejs to webpack and stumbled upon a problem, that might be a game-breaker for this endeavor.
我正在尝试将库从 grunt/requirejs 移植到 webpack 并偶然发现一个问题，这可能是这项工作的一个游戏破坏者。
The library I try to port has a function, that loads and evaluates multiple modules - based on their filenames that we get from a config file - into our app. The code looks like this (coffee):
我尝试移植的库有一个函数，它根据我们从配置文件获取的文件名将多个模块加载和评估到我们的应用程序中。代码如下（咖啡）：
loadModules = (arrayOfFilePaths) ->
new Promise (resolve) ->
require arrayOfFilePaths, (ms...) ->
for module in ms
module ModuleAPI
resolve()
The requirehere needs to be called on runtime and behave like it did with requireJS. Webpack seems to only care about what happens in the "build-process".
在require这里需要在运行时和行为被称为像它与requireJS一样。Webpack 似乎只关心“构建过程”中发生的事情。
Is this something that webpack fundamentally doesn't care about? If so, can I still use requireJS with it? What is a good solution to load assets dynamically during runtime?
这是 webpack 根本不关心的东西吗？如果是这样，我还可以使用 requireJS 吗？在运行时动态加载资产的好方法是什么？
edit: loadModule can load modules, that are not present on the build-time of this library. They will be provided by the app, that implements my library.
编辑：loadModule 可以加载模块，这些模块在该库的构建时不存在。它们将由实现我的库的应用程序提供。
采纳答案by sra
So I found that my requirement to have some files loaded on runtime, that are only available on "app-compile-time" and not on "library-compile-time" is not easily possible with webpack.
所以我发现我的要求在运行时加载一些文件，这些文件只能在“app-compile-time”而不是在“library-compile-time”上使用 webpack 是不容易实现的。
I will change the mechanism, so that my library doesn't require the files anymore, but needs to be passed the required modules. Somewhat tells me, this is gonna be the better API anyways.
我将更改机制，以便我的库不再需要这些文件，但需要传递所需的模块。有点告诉我，无论如何这将是更好的 API。
edit to clarify:
编辑以澄清：
Basically, instead of:
基本上，而不是：
# in my library
load = (path_to_file) ->
(require path_to_file).do_something()
# in my app (using the 'compiled' libary)
cool_library.load("file_that_exists_in_my_app")
I do this:
我这样做：
# in my library
load = (module) ->
module.do_something()
# in my app (using the 'compiled' libary)
module = require("file_that_exists_in_my_app")
cool_library.load(module)
The first code worked in require.js but not in webpack.
第一个代码在 require.js 中有效，但在 webpack 中无效。
In hindsight i feel its pretty wrong to have a 3rd-party-library load files at runtime anyway.
事后看来，我觉得无论如何在运行时使用 3rd-party-library 加载文件是非常错误的。
回答by Bogdan Savluk
There is concept named context(http://webpack.github.io/docs/context.html), it allows to make dynamic requires.
有一个名为context（http://webpack.github.io/docs/context.html）的概念，它允许进行动态需求。
Also there is a possibility to define code split points: http://webpack.github.io/docs/code-splitting.html
也可以定义代码分割点：http: //webpack.github.io/docs/code-splitting.html
function loadInContext(filename) {
return new Promise(function(resolve){
require(['./'+filename], resolve);
})
}
function loadModules(namesInContext){
return Promise.all(namesInContext.map(loadInContext));
}
And use it like following:
并使用它如下：
loadModules(arrayOfFiles).then(function(){
modules.forEach(function(module){
module(moduleAPI);
})
});
But likely it is not what you need - you will have a lot of chunks instead of one bundle with all required modules, and likely it would not be optimal..
但它可能不是你需要的——你会有很多块而不是一个包含所有必需模块的包，而且它可能不是最佳的。
It is better to define module requires in you config file, and include it to your build:
最好在您的配置文件中定义模块需要，并将其包含在您的构建中：
// modulesConfig.js
module.exports = [
require(...),
....
]
// run.js
require('modulesConfig').forEach(function(module){
module(moduleAPI);
})
回答by Venryx
You can also try using a library such as this: https://github.com/Venryx/webpack-runtime-require
您也可以尝试使用这样的库：https: //github.com/Venryx/webpack-runtime-require
Disclaimer: I'm its developer. I wrote it because I was also frustrated with the inability to freely access module contents at runtime. (in my case, for testing from the console)
免责声明：我是它的开发者。我写它是因为我也对无法在运行时自由访问模块内容感到沮丧。（在我的情况下，用于从控制台进行测试）
