javascript - 导入时 Webpack 库构建返回未定义
问题描述
只是分享一个我花了几个小时调试的问题和解决方案:
我有一个代码库,我想用 webpack 将它构建为一个库,并包含在另一个项目中。但是,当我在另一个库中导入输出文件时,它会返回undefined
.
这是(简化的)webpack 配置:
{
entry: './index.js',
mode: 'development',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app/my-app.[name].js'
library: 'my-app',
libraryTarget: 'umd'
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: {
name: 'vendors',
test: /[\\/](node_modules|libraries)[\\/]/
}
}
},
minimizer: [new TerserPlugin({
cache: true,
sourceMap: true,
parallel: true,
exclude: [/my-app.vendors.js/]
})]
},
}
从另一个项目中,我将按如下方式导入库:
const lib = require('./lib/my-app/dist/my-app.main');
console.log(lib);
页面上没有任何错误,控制台只会显示undefined
.
解决方案
结果发现解决方案很简单:因为我使用的是splitChunks
,所以输出包含 3 个文件my-app.runtime.js
:my-app.vendors.js
和my-app.main.js
. 我假设每个块都会require
自动产生其必要的依赖关系,但我假设错了。为了使图书馆工作,我需要像这样导入:
require('./lib/my-app/dist/my-app.runtime');
require('./lib/my-app/dist/my-app.vendors');
const lib = require('./lib/my-app/dist/my-app.main');
console.log(lib);
另一个很重要,因为main
需要vendors
和runtime
。
如果您考虑一下,这很明显,但也许这会帮助碰巧错过它的其他人。控制台中缺少错误无助于调试。
推荐阅读
- excel - Excel VBA Textbox_Exit 事件处理程序
- python - 如何在 python 中创建一个类或函数,以允许您创建具有特定特征的序列类型
- r - 库中的错误(“ggpmisc”):没有名为“ggpmisc”的包
- node.js - 如何处理从 API Web 服务 (ExpressJS) 检索的数据/json?
- node.js - 尽管我使用 express 公开,但无法访问服务器上的文件
- python - django // 原始查询必须包含主键
- python - 如何让我的 while 循环在 Python 中工作?
- java - 如何修复 Main 中调用的非静态方法?
- python - 未在python中保存并验证数据库登录
- cytoscape.js - 如何防止连接的节点在节点的拖动事件中被“前景化”