使用 webpack externals 导致浏览器出现 'require is not defined' 错误

Question

我正在尝试开发一个自定义的 React 组件，我想稍后在 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'
  }
}],

使用 webpack externals 导致浏览器出现 'require is not defined' 错误

Using webpack externals causes 'require is not defined' error in browser

javascript

reactjs

webpack

webpack-externals