Babel6在Angular5+Webpack3.8.1环境下未转换类定义，IE11报语法错误

我来帮你排查这个问题——这种情况大概率是Babel配置未正确覆盖TypeScript编译后的ES6+语法，或者polyfills的配置/依赖不全导致的。结合你提到的配置文件，咱们一步步来修复：

1. 完善Polyfills.ts的IE11支持配置 #

Angular 5对IE11的支持需要导入特定的polyfills，确保你的polyfills.ts包含以下内容（缺的部分补上）：

// IE9, IE10 and IE11 必需的基础polyfills
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

// IE10/11 支持SVG元素上NgClass的必需依赖
import 'classlist.js';  // 记得执行 npm install --save classlist.js

// IE10/11 支持Reflect API的必需依赖
import 'core-js/es6/reflect';

// 现代浏览器和Angular JIT模式需要的polyfill（AOT模式可移除）
import 'core-js/es7/reflect';

// Angular核心依赖的Zone.js
import 'zone.js/dist/zone';

执行命令安装缺失的依赖：

npm install --save core-js classlist.js zone.js

2. 修正.babelrc配置（针对IE11优化） #

Babel 6对类的转换需要明确的预设和插件，修改你的.babelrc为：

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["ie >= 11"]
      },
      "useBuiltIns": "entry",
      "modules": false
    }]
  ],
  "plugins": [
    "transform-es2015-classes",
    "transform-es2015-arrow-functions"
  ]
}

• modules: false：让Webpack负责模块处理，避免Babel重复转换导致冲突
• useBuiltIns: entry：根据你polyfills.ts的导入，自动加载IE11需要的polyfills
• transform-es2015-classes：强制将ES6类转换为IE11能识别的函数形式

3. 调整Webpack配置，确保Babel正确处理代码 #

修改webpack.config.js中的模块规则，让Babel loader先处理TypeScript编译后的代码：

module: {
  rules: [
    // 处理TypeScript文件：先转ES6再转ES5
    {
      test: /\.ts$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            configFile: './.babelrc'
          }
        },
        'ts-loader'
      ],
      exclude: /node_modules/
    },
    // 处理JS文件：排除大部分node_modules，但保留需要转译的依赖
    {
      test: /\.js$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            configFile: './.babelrc'
          }
        }
      ],
      exclude: /node_modules\/(?!(angular|core-js|classlist.js)\/)/
    }
  ]
}

4. 修正tsconfig.json配置 #

让TypeScript输出ES6代码，交给Babel转换为ES5（Angular 5的编译器更适配ES6输出）：

{
  "compilerOptions": {
    "target": "es6",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2017", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": ["./node_modules/@types"]
  },
  "exclude": ["node_modules"]
}

5. 确认package.json的依赖版本 #

确保你的依赖版本兼容Babel 6和Angular 5，参考以下配置：

"devDependencies": {
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.5",
  "babel-preset-env": "^1.7.0",
  "babel-plugin-transform-es2015-classes": "^6.24.1",
  "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
  "ts-loader": "^4.5.0",
  "typescript": "^2.9.2",
  "webpack": "^4.41.5"
},
"dependencies": {
  "@angular/common": "^5.2.11",
  "@angular/compiler": "^5.2.11",
  "@angular/core": "^5.2.11",
  "@angular/platform-browser": "^5.2.11",
  "@angular/platform-browser-dynamic": "^5.2.11",
  "core-js": "^2.5.7",
  "classlist.js": "^1.1.20150312",
  "zone.js": "^0.8.29"
}

执行命令更新依赖：

rm -rf node_modules dist && npm install

最后重新构建项目：

webpack --mode production

再在IE11中打开应用，检查语法错误是否消失。

内容的提问来源于stack exchange，提问作者Alex Vasiliev belrbez