javascript - 在浏览器中使用 webpack externals 会导致“require is not defined”错误

Question

我正在尝试开发一个自定义反应组件，我想稍后在 npm 上发布它。我有以下 webpack 配置：

var path = require('path');

module.exports = (env, args) => {
  entry: './src/index.js',
    output: {
    path: path.resolve(__dirname, 'build'),
      filename: 'index.js',
        libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      }
    ]
  }
  externals: {
    react: 'commonjs react'
  }
}

在浏览器中运行时，我得到'require is not defined'. 为什么 webpack 会捆绑 require 语句？如果我从配置中删除外部，一切运行正常。

编辑： 通过在浏览器中运行，我的意思是我已经使用 npx create-react-app 为 lib 创建了一个客户端项目。在那里，我通过导入语句导入了我的包。

Answer 1

我通过将库公开为通用模块来使其工作：

libraryTarget: 'umd'

并像这样指定外部：

externals: [{
  'react': {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
  }
}, {
  'react-dom': {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom'
  }
}],