React18项目如何打包部署为含样式的单个可共享JS文件

该需求完全可实现，无需额外搭配Gulp做文件拼接，仅通过Webpack或Parcel的打包配置，即可将React 18 + Redux Toolkit项目的所有逻辑、SASS/CSS样式、小体积静态资源全部内联到单个JS文件中。最终产物就是你需要的独立CWidget.js，在任意原生HTML页面通过script标签引入后即可直接调用组件，不会生成零散的构建产物。

不要直接使用CRA默认的npm run build命令，该命令针对单页应用场景做了代码分割，默认会生成大量散文件，不符合Widget打包需求。按以下步骤配置独立的Widget打包流程即可：

• 安装依赖
  执行以下命令安装打包所需依赖：

  npm i -D webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript css-loader sass-loader sass style-loader
  

• 编写Widget专属入口文件
  在src目录下新建widget-entry.jsx（不要复用CRA默认的index.jsx入口，避免触发单页应用的路由、懒加载拆包逻辑），内容如下：

  import React from 'react';
  import { createRoot } from 'react-dom/client';
  import { Provider } from 'react-redux';
  import { store } from './app/store'; // 替换为你项目中Redux Toolkit的store实际路径
  import CWidget from './CWidget'; // 替换为你要对外暴露的Widget组件实际路径
  import './index.scss'; // 引入全局样式，所有依赖的scss/css都会被自动打包
  
  function initWidget(containerId, props = {}) {
    const container = document.getElementById(containerId);
    if (!container) throw new Error('指定的Widget挂载容器不存在');
    const root = createRoot(container);
    root.render(
      <Provider store={store}>
        <CWidget {...props} />
      </Provider>
    );
    return {
      destroy: () => root.unmount()
    }
  }
  
  // 挂载到window全局，外部引入JS后可直接调用
  window.CWidget = { init: initWidget };
  

• 编写Webpack配置文件
  在项目根目录新建webpack.widget.config.js，配置如下：

  const path = require('path');
  
  module.exports = {
    mode: 'production',
    entry: './src/widget-entry.jsx',
    output: {
      path: path.resolve(__dirname, 'dist-widget'),
      filename: 'CWidget.js',
      library: {
        name: 'CWidget',
        type: 'umd',
        export: 'default'
      },
      clean: true
    },
    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx|ts|tsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                ['@babel/preset-react', { runtime: 'automatic' }],
                '@babel/preset-typescript' // 纯JS项目可删除该行
              ]
            }
          }
        },
        {
          test: /\.(scss|css)$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf|otf)$/,
          type: 'asset/inline',
          parser: {
            dataUrlCondition: {
              maxSize: 1024 * 1024 * 5 // 5MB以下静态资源全部转base64内联，可按需调整阈值
            }
          }
        }
      ]
    },
    performance: {
      hints: false
    }
  };
  

• 配置打包命令
  在package.json的scripts字段中添加打包命令：

  "build:widget": "webpack --config webpack.widget.config.js"
  

  执行npm run build:widget后，dist-widget目录下生成的CWidget.js就是最终需要的单文件产物。
• 调用测试
  在任意原生HTML页面中按以下方式引入即可使用：

  <!DOCTYPE html>
  <html>
  <body>
    <div id="widget-container"></div>
    <script src="https://www.someserverurl.com/CWidget.js"></script>
    <script>
      const widgetInstance = window.CWidget.init('widget-container', { /* 传入组件需要的props */ });
      // 需要销毁组件时调用 widgetInstance.destroy()
    </script>
  </body>
  </html>
  

如果不想编写复杂的Webpack配置，用Parcel可以用更少的配置实现同样的效果：

• 安装Parcel依赖：npm i -D parcel
• 复用方案一中编写的src/widget-entry.jsx入口文件
• 在package.json的scripts中添加命令：

  "build:widget-parcel": "parcel build src/widget-entry.jsx --dist-dir dist-widget --out-file CWidget.js --no-source-maps --no-content-hash"
  

  执行命令即可直接生成单文件产物，Parcel会自动处理JSX、SASS、静态资源内联，无需额外编写loader配置。

• Widget入口文件中不要使用import()动态懒加载语法，否则会生成额外的chunk文件，破坏单文件结构
• 如果需要做样式隔离，避免Widget和宿主页面的样式互相污染，可以在init方法中创建Shadow DOM节点，将组件挂载到Shadow DOM内部即可
• 生产模式打包会自动做Tree Shaking删除无用代码，如果最终产物体积过大，检查是否引入了未使用的依赖
• 不需要将React、ReactDOM、Redux Toolkit配置为外部依赖，全部打包进单文件才能保证Widget在任意原生页面独立运行，不需要额外引入其他资源

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