angular - 如何在 Angular 应用程序中包含额外的 ES6 源代码

Question

我有一个用 ES6 语法编写的自定义模式模块，我将其包含在我的 Angular 应用程序中，当我尝试构建启用了 -prod 标志的应用程序时遇到问题(来自 uglifyjs) :

Unexpected token: punc ()

这也是一个使用 angular-cli 1.7.4 的 Angular 5 应用。

我的节点模块的入口文件如下:

const MyModule = require('./src/index.js');

const myModule = new MyModule();

module.exports = {
  doStuff: myModule.doStuff,
  doOtherStuff: myModule.doOtherStuff
}

这然后像这样进入我的 ts 文件之一:

import MyModule = require('@acme/mymodule');

运行 ng serve 任务时，我没有遇到任何问题，可以按预期使用该应用程序。

在尝试生成生产版本时，我看到了这个问题。

在 ./src/index.js 文件中定义了许多使用 const\let\async\await 的函数。

四处阅读，我相信这归因于我使用 ES6，并且当 angular cli 执行构建步骤时，源代码与引擎盖下的 uglifyjs 不兼容。

据我所知，webpack 配置可以通过 angular-cli 配置进行控制，至少在 1.x 中不行，否则我会尝试使用众多插件中的一个来帮助我解决这个问题。

我假设我需要在它命中 angular-cli 之前通过一个额外的步骤运行代码，例如，使用 babel 转换我的 es6 代码。

我正在努力寻找如何在 Angular 和 cli 方面执行此操作的示例，我可以找到如何使用 babel 并且已经能够在我的节点模块源之一上测试它并且可以看到 es5 版本这产生了。

我实际上有 4 个节点模块，其中一些相互依赖，所以我想确保它们在转译后仍然可以相互依赖。

顺便说一句，不确定它有多相关，但在我的 polyfills.ts 文件中启用了以下 polyfill:

import "core-js/es5";
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';

非常感谢您提供的任何建议!

谢谢

更新

我制作了一个最小的 Angular 5 应用程序，它使用了 angular-cli 的 1.x。我已经在其中复制了构建行为，它也会从 UglifyJS 生成错误。

您可以在我的 Github 上找到该应用程序 here

我看到angular-cli使用的Webpack版本中使用的UglifyJS不支持es6转译。

在不迁移 angular\cli 版本的情况下，我很想看看是否有一种方法可以让示例应用程序编译为生产和运行而不会出现任何问题。

更新 2

所以经过更多的实验，我得出结论，在构建 Angular 5 应用程序时处理 ES6 转译的最优雅方法是使用 ng eject 获取 webpack.config.js 文件并配置uglifyjs-webpack-plugin 如本 article 中所述

这工作得很好，并且实际上允许对 webpack 进行更细粒度的控制，angular-cli 最初隐藏了你。

我愿意接受其他建议\答案，所以请随时在此处添加!

不过，如果可能的话，我仍然很想找到一种使用 angular-cli 的方法。

Answer 1

我可以看到三个选项来解决您的问题:

1. 更新到最新的 Angular 版本，包括 cli 并重新构建您的项目，这应该没问题。 (最佳选择)
2. 如果出于某种原因(因为你的 git 仓库只显示项目的最小版本)你无法更新。你可以尝试 "uglify-js": "github:mishoo/UglifyJS2#harmony" 它是 UglifyJS 的 es6 友好版本
3. 正如您已经发现的那样，您始终可以弹出并微调您的配置(更高级的选项)