无法从Webpack捆绑包导入ES6模块

Question

我有2个本地项目。 其中一个是第二个的UI库，但是必须将它们分开。 第二个项目是一个应从单个文件加载UI库的应用程序index.js库生成的捆绑软件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可能是空对象{}或未定义，或者抛出Uncaught错误：最小化React错误＃200； 请访问https://reactjs.org/docs/error-decoder.html?invariant=200获取完整消息，或使用非最小化的dev环境获取完整错误和其他有用的警告。

---

我尝试设置library和libraryTarget ，将我的脚本简化为一个没有依赖项的衬里，而我对所缺少的内容感到非常焦虑。 我将不胜感激 ！

Answer 1

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

除此之外，你可能还需要设置为反应peerDependency在UI libiary和配置的WebPack：

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

这可以导致捆束更小。