如何在Angular应用程序中包含其他ES6源代码

Question

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

Unexpected token: punc ()

这是一个使用angular-cli 1.7.4的角度5 app.

我的节点模块的条目文件如下:

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和源角度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';

我感谢您提供的任何建议!

谢谢

UPDATE

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

你可以在我的Github上找到该应用程序在这里

我已经看到UglifyJS在Webpack的版本中使用angular-cli使用,不支持es6转换.

如果没有迁移angular\cli版本,我很想知道是否有办法让示例应用程序编译生产和运行没有任何问题.

更新2

所以经过一番尝试更多,我已经得出结论认为,建立一个角5应用程序时处理ES6 transpilation最优雅的方式是使用ng eject来获取webpack.config.js文件并配置uglifyjs-webpack-plugin为解释这文章

这非常好用,并且实际上允许对webpack进行更精细的控制,而angular-cli最初会隐藏它.

我对其他建议\答案持开放态度,所以请随时添加到这里!

如果可能的话,我仍然希望找到一种方法来使用angular-cli.

Answer 1

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

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