如何打包React组件供无打包工具的遗留MVC应用调用

针对你的需求，下面提供两种可行的打包方案，既能压缩代码体积、兼容UI库导入，又能保留工厂函数签名，输出浏览器可直接使用的ESM格式：

方案一：Rollup 配置（推荐，灵活可控） #

Rollup天生适合打包库，配合插件可以完美处理React、UI库及CSS导入，同时通过配置保留函数名并压缩代码。

1. 安装依赖 #

npm install rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-babel @rollup/plugin-terser rollup-plugin-postcss @babel/core @babel/preset-react --save-dev

2. 编写 Rollup 配置文件（rollup.config.js） #

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import terser from '@rollup/plugin-terser';
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/OrgTreeFactory.js', // 你的工厂函数入口文件路径
  output: {
    file: 'Content/MyReactLib.js', // 输出到遗留应用的目标路径
    format: 'es', // 输出ESM格式，适配浏览器模块导入
    sourcemap: false // 生产环境可关闭，开发环境改为true
  },
  plugins: [
    // 处理CSS导入，自动注入到页面
    postcss({
      inject: true,
      minimize: true // 压缩CSS
    }),
    // 解析npm包（如devextreme-react）
    resolve({
      browser: true,
      extensions: ['.js', '.jsx']
    }),
    // 转换CommonJS模块为ESM
    commonjs({
      include: 'node_modules/**'
    }),
    // 转译React JSX语法
    babel({
      presets: ['@babel/preset-react'],
      exclude: 'node_modules/**',
      babelHelpers: 'bundled' // 打包babel辅助代码
    }),
    // 压缩代码并保留工厂函数名
    terser({
      mangle: {
        keep_fnames: true // 防止函数名被混淆
      },
      compress: {
        drop_console: true // 可选：移除console语句
      }
    })
  ],
  // 可选：如果希望遗留页面全局引入React/ReactDOM，就保留这行；否则删除，将React打包进库
  external: ['react', 'react-dom']
};

3. 打包命令 #

• 开发模式（监听文件变化）：rollup -c --watch
• 生产模式：rollup -c

方案二：Vite 配置（更简洁，适合快速搭建） #

通过调整Vite的库模式配置，可输出浏览器兼容的ESM，并避免函数名混淆。

1. 安装依赖 #

npm install vite @vitejs/plugin-react --save-dev

2. 编写 Vite 配置文件（vite.config.js） #

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'src/OrgTreeFactory.js', // 工厂函数入口路径
      formats: ['es'], // 仅输出ESM格式
      fileName: () => 'MyReactLib.js'
    },
    rollupOptions: {
      // 可选：外部引入React/ReactDOM，需页面提前全局引入
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          react-dom: 'ReactDOM'
        }
      }
    },
    // 使用Terser压缩，避免esbuild过度混淆函数名
    minify: 'terser',
    terserOptions: {
      mangle: {
        keep_fnames: true
      }
    }
  }
});

3. 打包命令 #

vite build

打包完成后，将dist/MyReactLib.js复制到遗留应用的Content目录下。

页面调用注意事项 #

1. 必须添加type="module"：浏览器识别ESM模块需要指定脚本类型
2. 若配置了external: ['react', 'react-dom']，需提前全局引入React库：

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<script type="module">
import MyReactComponent from '/Content/MyReactLib.js';
$(document).ready(function () {
    MyReactComponent('your-element-id');
});
</script>

关键说明 #

• 若不需要外部依赖React，删除配置中的external项即可将React/ReactDOM打包进库，无需页面额外引入
• CSS处理：两种方案都会自动将UI库的CSS注入到页面，若需单独生成CSS文件，可调整postcss（Rollup）或Vite的build.cssCodeSplit配置
• 确保遗留应用的服务器支持ESM的MIME类型（.js文件的Content-Type为application/javascript），现代服务器默认都支持

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