[英]required modules in a webpack bundle are undefined
我正在构建一个JavaScript库,并使用require()方法将外部模块插入其他模块。 我的问题是我需要的模块没有定义。 我可以看到所有模块都在webpack输出文件中,但在运行时所需的模块返回未定义。
我做了一个实验,将需要的模块移到了输出文件顶部的另一个模块中,这样,所需的模块就会先由浏览器加载。 这解决了问题。
例如:
// main.js
var moduleA = require('./module.a.js');
var main = (function() {
"use strict";
return {
moduleA: moduleA
}
})();
exports.main = main;
// module.a.js
var moduleA = (function() {
"use strict";
return {
myMethod: myMethod
}
})();
exports.moduleA = moduleA;
当前我的webpack.config.js定义该入口文件是main.js
var path = require('path');
var webpack = require('webpack');
var libraryName = "myLib";
module.exports = {
entry: './src/modules/main.js',
output: {
path: __dirname+"/build",
filename: libraryName+'.all.js',
library: libraryName,
libraryTarget: 'umd',
umdNamedDefine: true
},
resolve: {
root: [
path.resolve('./src/')
]
},
module: {
loaders: [
// JS
{
test: /.js/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
]
}
};
这导致main.js首先加载到输出文件中,如果手动对输出文件中的模块进行重新排序,以便在我的主模块之前先读取moduleA,那么如何使用webpack修复此问题? 我的其他Webpack构建在输出文件的顶部具有入口文件,但工作正常。
一旦开始使用Webpack,就可以使用大大简化的模块。 您不必在IIFE中包装东西。 CommonJS模块(使用Webpack时将在其中构建)会自动完成所有操作,并且永远不会污染全局范围。 您只公开了放在module.exports
。
请尝试以下操作:
// main.js
"use strict";
var moduleA = require('./module.a.js');
// do something with moduleA.myMethod()
module.exports = "Whatever you want to export";
和
// module.a.js
"use strict";
function myMethod() {
return "something";
}
module.exports = { myMethod: myMethod };
不需要什么了。 这将与Webpack提供的输出一起使用,您永远不必在Webpack的输出中进行任何更改。 Webpack将自动执行需求,以便在需要时以正确的顺序为您实例化模块。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.