Angular 5+angular-cli 1.7.4引入ES6模块的生产构建报错咨询

你遇到的问题确实是因为Angular CLI 1.x默认使用的UglifyJS插件只支持ES5语法，而你的自定义模块包含async/await、const/let等ES6特性，导致生产构建时压缩报错。下面给你几个无需eject也不用升级CLI的可行方案：

方案1：让自定义模块自身输出ES5代码 #

最根本的解决方式是让你的Node模块发布/使用ES5版本的代码，这样Angular的构建流程就能正常处理。步骤如下：

• 在自定义模块的根目录安装Babel相关依赖：

  npm install @babel/core @babel/cli @babel/preset-env --save-dev
  

• 创建.babelrc配置文件，指定转译目标：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 11"],
          "node": "current"
        }
      }]
    ]
  }
  

• 修改模块的package.json：
  1. 添加构建脚本："build": "babel src --out-dir dist"
  2. 将main字段改为转译后的入口文件："main": "dist/index.js"
• 执行npm run build生成ES5代码，之后无论是发布到npm还是本地用npm link，都使用dist目录下的代码。如果是本地开发，可以加一个watch脚本："watch": "babel src --out-dir dist --watch"，实时同步代码变化。

方案2：用angular-builders扩展CLI构建配置（无需eject） #

这个方案可以在不eject的情况下修改Webpack的Uglify配置，让它支持ES6语法：

• 安装兼容的依赖包：

  npm install @angular-builders/custom-webpack uglifyjs-webpack-plugin@1 --save-dev
  

  注意：uglifyjs-webpack-plugin要选1.x版本，因为CLI 1.x的Webpack版本较低，高版本不兼容。
• 在项目根目录创建custom-webpack.config.js：

  const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  
  module.exports = {
    plugins: [
      new UglifyJsPlugin({
        uglifyOptions: {
          ecma: 6, // 开启ES6支持
          compress: true,
          mangle: true
        }
      })
    ]
  };
  

• 修改angular-cli.json（CLI 1.x的配置文件），替换默认的构建器并指定自定义Webpack配置：
  找到defaults.build部分，修改为：

  "defaults": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./custom-webpack.config.js"
        },
        // 保留原有的build options，比如outputPath、baseHref等
      }
    }
  }
  

• 现在执行ng build --prod，应该就能正常压缩ES6代码了。

方案3：临时关闭优化（不推荐生产环境） #

如果只是临时测试，可以用--no-optimization参数跳过Uglify压缩：

ng build --prod --no-optimization

但这个方案会导致生产包体积变大，不建议正式发布时使用。

额外注意点 #

• 确保你的polyfills.ts已经引入了必要的core-js polyfill，比如：

  import 'core-js/es6/reflect';
  import 'core-js/es7/reflect';
  import 'core-js/es6/promise';
  

  这能确保浏览器端兼容ES6特性。
• 如果你的自定义模块还有其他依赖是ES6代码，也要对它们做同样的转译处理，或者确保它们本身提供了ES5版本。

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