SolidJS项目转ES5时Babel预设失效，旧浏览器兼容求助

核心问题分析 #

当前构建产物中保留const/let、箭头函数等ES6+语法，主要原因包括：

• @babel/preset-env未指定明确的旧浏览器目标，导致Babel未触发全量转译
• Babel Loader的include/exclude配置范围错误，部分需要转译的代码未被处理
• Webpack自身的target配置未匹配ES5标准
• Babel预设顺序不合理，转译流程未覆盖SolidJS编译后的代码

具体解决方案 #

1. 给@babel/preset-env指定明确的浏览器目标 #

在@babel/preset-env配置中添加targets字段，明确需要兼容的旧浏览器版本，Babel会根据目标自动转译对应的语法：

presets: [
  'solid',
  '@babel/preset-typescript',
  [
    '@babel/preset-env',
    {
      targets: {
        ie: '11',
        chrome: '58',
        firefox: '54',
        safari: '10'
      },
      useBuiltIns: 'usage',
      corejs: '3.27',
    },
  ],
],

2. 修正Babel Loader的include/exclude范围 #

确保仅处理项目源码和需要转译的依赖（比如SolidJS相关模块），避免遗漏或无效处理：

const babelLoader = {
  test: /\.(js|jsx|ts|tsx)$/,
  include: [
    options.paths.src, // 项目源码目录
    options.paths.hls,
    // 包含SolidJS相关依赖，因为其编译产物可能为ES6+
    /node_modules\/solid-js/,
    /node_modules\/solid-js-web/
  ],
  exclude: [
    options.paths.corejs,
    // 排除其他无需转译的node_modules包
    /node_modules\/(?!(solid-js|solid-js-web)\/)/
  ],
  // ... 其他配置
};

3. 配置Webpack的target为ES5 #

在Webpack配置中设置target字段，强制输出兼容ES5的代码：

module.exports = {
  // ... 其他配置
  target: ['web', 'es5']
};

4. 调整Babel预设顺序 #

Babel预设是逆序执行的，需将@babel/preset-env放在最后，确保它能处理solid和@babel/preset-typescript编译后的代码：

注意：原配置中@babel/preset-env在solid之前，会导致SolidJS的编译逻辑覆盖ES5转译，需调整顺序。

5. 移除冗余插件 #

删除手动添加的语法转译插件，@babel/preset-env会根据targets自动启用所需插件，避免冲突：

plugins: [
  '@babel/plugin-syntax-dynamic-import'
  // 移除以下冗余插件：
  // '@babel/plugin-proposal-class-properties',
  // '@babel/plugin-proposal-object-rest-spread',
  // '@babel/plugin-transform-arrow-functions'
],

验证步骤 #

修改配置后重新构建项目，检查输出的build.js文件：

• 确认const/let已转为var
• 箭头函数已转为普通函数表达式
• 类属性、对象展开等语法已完成转译

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