У меня есть модуль пользовательского режима, написанный на синтаксисе ES6, который я включаю в мое угловое приложение, и у меня возникают проблемы (из uglifyjs), когда я пытаюсь создать приложение с включенным флагом -prod:
Unexpected token: punc ()
Это угловое приложение, использующее также angular-cli 1.7.4.
Файл ввода для моего модуля узла выглядит следующим образом:
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 и источники, несовместимые с uglifyjs под капотом, когда угловой cli выполняет шаги сборки.
Из того, что я также прочитал, настройкой веб-пакета можно управлять из конфигурации angular-cli, по крайней мере, не в 1.x, иначе я бы попробовал один из многих плагинов, чтобы помочь мне обойти это.
Я предполагаю, что мне нужно выполнить код через дополнительный шаг, прежде чем он достигнет angular-cli, например, использовать babel для преобразования моего кода es6.
Я изо всех сил пытаюсь найти примеры того, как это сделать по отношению к angular и cli, я могу найти, как использовать babel, и смог проверить это на одном из моих исходных текстов модуля узла и могу увидеть версию es5 этого произведено.
На самом деле у меня есть 4 узловых модуля, и некоторые из них требуют друг друга, поэтому я хочу убедиться, что они могут по-прежнему нуждаться друг в друге после транспортировки.
Кстати, не уверен, насколько это актуально, но в моем файле polyfills.ts включены следующие полифилы:
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
Итак, после еще нескольких экспериментов я пришел к выводу, что наиболее изящный способ обработки трансплантации ES6 при создании приложения Angular 5 - это использование ng eject для получения файла webpack.config.js и настройки uglifyjs-webpack-plugin, как описано в этой статье
Это прекрасно работает и на самом деле позволяет более точный контроль над веб-пакетом, от которого angular-cli скрывает вас изначально.
Я открыт для других предложений \ ответов, поэтому не стесняйтесь добавлять сюда!
Я все равно хотел бы найти способ использовать angular-cli, если это вообще возможно.