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

【问题标题】：Using webpack externals causes 'require is not defined' error in browser在浏览器中使用 webpack externals 会导致“require is not defined”错误
【发布时间】：2019-09-23 18:40:16
【问题描述】：

我正在尝试开发一个自定义反应组件，我想稍后在 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 创建了一个客户端项目。在那里，我通过 import 语句导入了我的包。

【问题讨论】：

您要使用哪个输出？ commonjs 表示 require() 将可用，因为这是 CommonJS 规范的一部分。
你能详细说明一下你是如何在浏览器中运行它的吗？
@EmrahIzci 我已经更新了问题。
@zero298 我希望其他人可以使用 npm 导入它。所以，我想你是对的，这就是原因。但是我的客户项目不应该转换 require 语句吗？

标签： javascript reactjs webpack webpack-externals

【解决方案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'
  }
}],

【讨论】：