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外部组件会在浏览器中导致“未定义要求”错误

1 个答案: