无法从 webpack bundle 导入 ES6 模块

Question

我有 2 个本地项目。其中一个是第二个的 UI 库，但它们必须是分开的。第二个项目是一个应用程序，它应该从单个文件(UI 库生成的捆绑包(加载 UI 库index.js

我用 webpack 4 生产配置完成了 UI 库，如下所示：

const path = require('path')
const webpackConfig = {
entry: {
index: './src/styleguide/main.js',
},
devtool: 'source-map',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{ test: /.js/, use: 'babel-loader' },
],
},
mode: 'production',
}
module.exports = webpackConfig;

为了弄清楚，让我们使用以下作为我index.js

export default function Text () { return <p>Hello world</p> }

这为我提供了一个"dist/index.js"文件，这也是我package.json的入口点

---

在另一个需要使用UI库的项目中，我正在尝试简单地做import UI from '../ui/dist/index.js'

但是UI要么是{}的空对象，要么是未定义的空对象，要么抛出未捕获的错误：缩小的 React 错误 #200; 访问 https://reactjs.org/docs/error-decoder.html?invariant=200 以获取完整消息或使用非缩小开发环境以获取完整错误和其他有用警告。

---

我尝试设置library和libraryTarget，将我的脚本简化为一个没有依赖关系的行，我对我错过的东西感到非常焦虑。我将不胜感激任何帮助！

Answer 1

在UI库中将output.libraryTarget设置为commonjs2应该可以解决您的问题。

除此之外，您可能还想在 UI libiary 和配置 webpack 中将 react 设置为peerDependency：

externals: {      
// Don't bundle react      
react: {          
commonjs: "react",          
commonjs2: "react",          
amd: "React",          
root: "React"      
}  
},

这可能会导致捆绑包小得多。