javascript - 无法从 webpack 包导入 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 库的项目中，我尝试简单地从 '../ui/dist/index.js' 导入 UI

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

<小时/>

我尝试设置library和libraryTarget，将我的脚本简化为一个没有依赖项的衬垫，我对我缺少的东西感到非常焦虑。对于任何帮助，我将感激!

Answer 1

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

除此之外，您可能还想在 UI 库和配置 webpack 中将 React 设置为 peerDependency:

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

这可能会导致 bundle 变得更小。