如何基于Create React App构建兼容ES3的TypeScript React应用

方案一：基于Create React App（CRA） #

1. 初始化项目并安装依赖 #

npx create-react-app my-es3-app --template typescript
cd my-es3-app
npm install es3ify-webpack-plugin react-app-polyfill core-js@2 @craco/craco --save-dev

注：core-js@2是唯一兼容IE8的版本，core-js@3不再支持IE8

2. 修改根目录tsconfig.json #

{
  "compilerOptions": {
    "target": "es3",
    "lib": ["es5", "dom"],
    "downlevelIteration": true,
    "importHelpers": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

3. 配置Polyfill #

在src/index.tsx最顶部引入：

import 'react-app-polyfill/ie8';
import 'core-js/es6/symbol';
import 'core-js/es6/object';

4. 自定义Webpack配置（通过Craco） #

根目录创建craco.config.js：

const Es3ifyPlugin = require('es3ify-webpack-plugin');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 添加ES3ify插件处理最终代码
      webpackConfig.plugins.push(new Es3ifyPlugin());
      // 强制转译所有node_modules依赖（避免第三方代码残留ES6+语法）
      webpackConfig.module.rules[1].oneOf.forEach(rule => {
        if (rule.test?.toString().includes('js|mjs|jsx|ts|tsx')) {
          rule.exclude = undefined;
          rule.include = [/src/, /node_modules/];
        }
      });
      return webpackConfig;
    }
  }
};

修改package.json的scripts：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
}

5. 构建并测试 #

npm run build

将build目录部署到Win7虚拟机的IE8环境验证。

方案二：基于Vite #

1. 初始化项目并安装依赖 #

npm create vite@latest my-es3-vite-app -- --template react-ts
cd my-es3-vite-app
npm install
npm install @vitejs/plugin-legacy es3ify core-js@2 --save-dev

2. 修改vite.config.ts #

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

export default defineConfig({
  plugins: [
    react(),
    legacy({
      targets: ['ie 8'],
      additionalLegacyPolyfills: ['core-js/es6/symbol', 'core-js/es6/object'],
      renderLegacyChunks: true,
      polyfills: [
        'es6.array.iterator',
        'es6.promise',
        'es6.object.assign',
        'es6.symbol'
      ]
    }),
    // 自定义ES3ify转译插件
    {
      name: 'es3ify',
      transform(code) {
        return {
          code: transform(code),
          map: null
        };
      }
    }
  ],
  build: {
    target: 'es3',
    outDir: 'dist'
  }
});

3. 修改根目录tsconfig.json #

{
  "compilerOptions": {
    "target": "es3",
    "lib": ["es5", "dom"],
    "downlevelIteration": true,
    "importHelpers": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src"]
}

4. 构建并测试 #

npm run build

将dist目录部署到IE8环境验证。

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