如何从自定义React组件构建产物中移除React依赖？

完全可以通过Webpack的externals配置来解决这个问题，核心思路就是告诉Webpack：React和ReactDOM是外部依赖，不需要打包到产物里，而是由使用组件库的父项目提供。

具体解决步骤： #

1. 添加externals字段到Webpack配置
   在你的Webpack配置对象里新增externals属性，把React和ReactDOM声明为外部依赖。因为你用了libraryTarget: 'umd'，需要适配不同的模块规范（CommonJS、AMD、全局变量），配置如下：

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

2. 优化样式打包（可选但推荐）
   你当前用style-loader会把样式注入到JS中，生产环境建议用mini-css-extract-plugin把样式抽成单独的CSS文件，进一步减小JS产物体积。安装插件后修改rules：

   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   
   // ... 其他配置
   module: {
     rules: [
       // ... js loader 配置不变
       {
         test: /\.scss$/,
         use: [
           MiniCssExtractPlugin.loader, // 替换style-loader
           { loader: 'css-loader' },
           { loader: 'sass-loader' }
         ]
       }
     ]
   },
   plugins: [
     new CleanWebpackPlugin(['dist']),
     new MiniCssExtractPlugin({ filename: 'custom-button.css' }) // 新增这个插件
   ]
   

修改后的完整Webpack配置： #

const webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 新增

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'custom-button.js',
    library: 'custom-button',
    libraryTarget: 'umd',
    path: path.resolve(__dirname, 'dist')
  },
  externals: { // 新增的externals配置
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom'
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader, // 替换style-loader
          { loader: 'css-loader' },
          { loader: 'sass-loader' }
        ]
      }
    ]
  },
  optimization: {
    minimizer: [new UglifyJsPlugin()]
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new MiniCssExtractPlugin({ filename: 'custom-button.css' }) // 新增插件实例
  ]
}

原理说明： #

• externals告诉Webpack在打包时忽略指定的依赖，而是在运行时从外部环境获取这些依赖。对于UMD格式的库，这个配置能兼容不同的模块系统：
  • 当用户用CommonJS（比如Node.js或Webpack）时，会从require('react')获取；
  • 当用户用AMD时，会从define(['react'], ...)获取；
  • 当用户直接在浏览器中用全局变量时，会从window.React获取。
• 这样修改后，你的组件库产物就不会包含React代码，体积会大幅降到2kb以下，符合小型组件的预期。

额外注意事项： #

在你的组件库的package.json里，要把react和react-dom声明为peerDependencies，这样可以提醒用户在安装你的组件库时，确保已经安装了兼容版本的React：

"peerDependencies": {
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}

内容的提问来源于stack exchange，提问作者user5711656