Angular 2+/Webpack/Angular CLI中导入jQuery插件IE11报错求助

IE11对ES6+语法的支持一直是个坑，你遇到的这个报错，本质是打包后的代码里包含了IE11看不懂的ES6特性——尤其是webpack用eval加载模块时的那些语法。下面一步步来解决：

1. 补全必要的Polyfills #

IE11缺少很多现代JS的基础API，先把src/polyfills.ts里的必要polyfills都打开（没装的包记得用npm安装）：

// 基础ES6+ polyfills
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';

// DOM相关polyfills
import 'classlist.js'; // 需执行 npm install classlist.js
import 'web-animations-js'; // 需执行 npm install web-animations-js

// Zone.js 必须保留，IE11不支持原生Zone
import 'zone.js/dist/zone';

2. 把TypeScript编译目标降到ES5 #

打开tsconfig.json，确保编译器输出IE11能识别的ES5代码：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es2015", "dom"],
    // 其他原有配置保持不变
  }
}

同时检查tsconfig.app.json，确保它extends了主tsconfig.json，并且没有把target覆盖为更高版本。

3. 让webpack正确转译jQuery和插件 #

默认情况下，webpack不会转译node_modules里的包，但很多jQuery插件可能是用ES6写的，得告诉Angular要处理它们：
打开angular.json，在projects.xxx.build.options里添加：

"allowedCommonJsDependencies": [
  "jquery",
  "你的jQuery插件包名"
]

如果插件是本地文件而非npm包，还需要在tsconfig.json里设置"allowJs": true，并把插件所在目录加入include列表，确保它被转译流程覆盖。

4. 修正组件中jQuery的使用方式 #

别在组件的构造函数里调用jQuery插件！IE11下DOM渲染时机更严格，要等到视图初始化完成后再操作：

import * as $ from 'jquery';
// 导入你的jQuery插件
import 'your-plugin-path';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  ngAfterViewInit() {
    // 确保DOM元素已经存在
    $('#your-element').yourPlugin();
  }
}

5. 关闭webpack的eval源码映射 #

报错里提到了eval，IE11对eval内的ES6语法支持极差，在开发环境可以暂时关闭eval类型的source map：
在angular.json的projects.xxx.build.options里设置：

"sourceMap": {
  "scripts": false,
  "styles": false,
  "vendor": false
}

生产环境构建时（ng build --prod）默认会用更兼容的source map，所以这个主要是解决开发环境的IE11报错。

最后验证 #

执行ng build --prod，把dist目录下的文件放到服务器上，用IE11打开测试。生产环境的打包会做更彻底的代码降级，很多开发环境的报错在生产环境会自动消失。

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