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的原因，并且当角度cli执行构建步骤时，源代码与uglifyjs不兼容。

据我所读，webpack配置可以从angular-cli配置中控制，至少不能在1.x中控制，否则我会尝试使用众多插件之一来帮助我解决这个问题。 / p>

我假设我需要先执行一个额外的步骤，然后才能到达angular-cli，例如，使用babel转换我的es6代码。

我正在努力寻找与角度和cli相关的方法示例，我可以找到如何使用babel并能够在我的一个节点模块源上对其进行测试，并且可以看到es5版本产生的。

我实际上有4个节点模块，其中一些是相互需要的，所以我想确保它们在编译后仍然可以相互使用。

顺便说一句，不确定它的相关性如何，但是在我的polyfills.ts文件中启用了以下polyfills：

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应用程序，它使用了1.x的angular-cli。我已经在其中复制了构建行为，该行为也从UglifyJS生成了错误。

您可以在我的Github here

上找到该应用程序

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

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

更新2

因此，在进行了更多实验之后，我得出结论，在构建Angular 5应用程序时，处理ES6转换的最优雅的方法是使用ng eject来获取webpack.config.js文件并配置{{1 }}，如本article

中所述

这工作得很好，并且实际上允许对webpack进行更精细的控制，angular-cli最初使您无法使用。

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

尽管如此，我仍然很想找到一种使用angular-cli的方法。

Answer 1

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

更新到包括cli的最新Angular版本，并重新构建您的项目，这应该很好。（最佳选项）
如果由于某些原因（因为您的git repo仅显示项目的最低版本），您将无法更新。您可以尝试"uglify-js": "github:mishoo/UglifyJS2#harmony"，它是UglifyJS的es6友好版本
您已经发现，可以随时弹出并微调配置（更高级的选项）

如何在Angular应用中添加其他ES6源

1 个答案: