ng serve --prod for ng-cli 导致 UglifyJs SyntaxError: Unexpected token: name

Question

我在我的项目中使用Angular-CLI (ng-cli)。当我输入ng serve 时，应用程序就会运行。但是，当我输入ng serve --prod 时，出现以下错误。

来自 UglifyJs 的 vendor.bundle.js 中的错误 SyntaxError: Unexpected token: name (IdUtil) [./~/my-lib/dist/src/common/util.js:7,0][vendor.bundle.js:9318,6]

是a known issue that UglifyJs cannot parse ES6。

此外，这些 SO 帖子（here 和 here）建议将 tsconfig.json 更改为目标 es5。我不清楚的是它们是指消费 Angular 项目的 tsconfig.json 还是用于生成库的项目。无论如何，我的 Angular 项目的tsconfig.json 已经针对es5。如下所示。

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

导入到 Angular 项目中的库的tsconfig.json 如下所示，它的目标不是es5，而是es6。顺便说一句，我不能简单地将这个库中的开关从es6 切换回es5（我刚刚尝试过），因为我正在使用es6 类，如Set 和Map（这些类的使用是如此严重，以至于至少可以说更改它们并非易事；如果我知道所有这些，我会选择完全避免使用 es6 功能）。

{
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es6",
        "module": "commonjs",
        "alwaysStrict": true,
        "diagnostics": false,
        "listEmittedFiles": false,
        "listFiles": false,
        "pretty": true,
        "declaration": true
    }
}

这是我的问题。

• 在使用ng serve --prod 时如何使用Angular-CLI 禁用丑化？
• 是我的 Angular 项目的 es5/es6 目标还是导入的库有问题？
• SO 帖子似乎暗示我可以在 Angular-CLI 通过 UglifyJs for ng serve --prod 之前通过 babel（我以前从未使用过）预处理导入的库。此程序是否记录在案？如果是这样，请让我知道如何执行此操作。 angular-cli.json 是我了解配置 ng-cli 的地方。如果这个建议是真的，我无法确定如何挂钩 babel 预处理。

Answer 1

ng serve 命令专为在开发环境中工作而设计。

尝试运行：

ng build --prod

如果您使用 IE 测试您的应用：

运行命令

npm install -dev angular2-ie9-shims

而且你必须添加 angular-cli.json

"scripts": [
    "../node_modules/angular2-ie9-shims/shims_for_IE@2.1.2.js",
    "../node_modules/angular2-ie9-shims/shims_for_IE@2.0.0-beta.17.js",
    "../node_modules/angular2-ie9-shims/shims_for_IE.dev.js"
  ],

或者只是在 index.html 中添加

<script src="https://raw.githubusercontent.com/angular/angular/66df335998d097fa8fe46dec41f1183737332021/shims_for_IE.js" type="text/plain"></script>

Answer 2

您可以使用一些技巧来处理 ES6/ES2015 缩小。

你可以使用 uglifyjs-webpack-plugin by bebraw - 它将 UglifyJs 与 webpack 分离。用法如下：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: {...},
    output: {...},
    module: {...},
    plugins: [
        new UglifyJSPlugin()
    ]
};

然后，您必须将 package.json 中的 uglify-js 引用替换为以下内容：

"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony",

Answer 3

我遇到的问题是来自 Google 的名为 Autotrack 的 NPM 模块。该包在 ES6 中，它是一个 .js 文件，因此 Typescript 没有对其进行转译。我必须手动包含一个 ES5 版本的 Autotrack 才能使 uglify 工作。