Question

我正在为我的项目使用Angular-CLI（ng-cli）。当我输入ng serve时，应用程序会运行。但是，当我输入ng serve --prod时，我收到以下错误。

ERROR in vendor.bundle.js from UglifyJs
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和{{ 1}}（这些类的使用是如此严重以至于改变它们并不是微不足道的，至少可以说;如果我知道所有这些，我会选择完全避免使用es6功能。）

es6

以下是我的问题。

使用Set？
我的Angular项目的Map目标或导入的库存在问题吗？
SO帖子似乎暗示我可以通过babel（我之前从未使用过）预先处理导入的库，然后Angular-CLI通过UglifyJs为{ "compilerOptions": { "noImplicitAny": true, "target": "es6", "module": "commonjs", "alwaysStrict": true, "diagnostics": false, "listEmittedFiles": false, "listFiles": false, "pretty": true, "declaration": true } }发挥其魔力。该程序是否记录在案？如果是这样，请告诉我如何做到这一点。 ng serve --prod是我理解ng-cli配置的地方。如果这个建议属实，我无法做出如何勾勒出babel预处理的头或尾。

Answer 1

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

您可以使用bebraw uglifyjs-webpack-plugin - 将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 2

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 3

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

ng serve --prod for ng-cli导致UglifyJs语法错误：意外的令牌：名称

3 个答案: