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.jsmy-app.vendors.jsmy-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将需要vendorsruntime.

如果你考虑一下,这很明显,但也许这会帮助碰巧错过它的其他人。控制台中缺少错误无助于调试。

相关内容

  • 没有找到相关文章

最新更新