web-dev-qa-db-ja.com

追加のES6ソースをAngular appに含める方法

angularアプリケーションに含めているES6構文で記述されたカスタムモードモジュールがあり、-prodを使用してアプリをビルドしようとすると（uglifyjsから）問題が発生します。フラグが有効：

Unexpected token: punc ()

これは、angular-cli1.7.4も使用するangular 5アプリです。

私のノードモジュールのエントリファイルは次のとおりです。

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

const myModule = new MyModule();

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

次に、これは次のように私のtsファイルの1つに必要になります。

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

ng serveタスクを実行すると、問題はなく、期待どおりにアプリケーションを使用できます。

プロダクションビルドを作成しようとすると、この問題が発生します。

の./src/index.jsファイル内には、const\let\async\awaitを使用する多くの関数が定義されています。

読んでみると、これはES6を使用している私にかかっていると思います。また、angular cliがビルド手順を実行するときに、ソースが内部でuglifyjsと互換性がないことになります。

私も読んだことから、webpackの構成はangular-cli構成から制御できますが、少なくとも1.xでは制御できません。そうでなければ、これを回避するのに役立つ多くのプラグインの1つを試してみました。

コードがangular-cliに到達する前に、追加の手順を実行する必要があると想定しています。たとえば、babelを使用してes6コードを変換します。

angularとcliに関連してこれを行う方法の例を見つけるのに苦労しています。babelの使用方法を見つけることができ、ノードモジュールソースの1つでこれをテストすることができました作成されたこれの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';

私はあなたが提供できるアドバイスに感謝します！

ありがとう

[〜＃〜]更新[〜＃〜]

最小限のAngular 5アプリケーションを作成しました。これはangular-cliの1.xを使用しました。これでビルド動作を複製し、UglifyJSからもエラーを生成しました。

あなたは私のGithubでアプリを見つけることができます ここ

私は、angular-cliが使用するWebpackのバージョンで使用されるUglifyJSが、es6トランスパイルをサポートしていないことを確認しました。

Angle\cliバージョンを移行せずに、サンプルアプリを本番用にコンパイルして問題なく機能させる方法があるかどうかを確認したいと思います。

UPDATE 2

したがって、さらに実験を重ねた結果、Angular 5アプリを構築するときにES6トランスパイルを処理する最も適切な方法は、ng ejectを使用してwebpack.config.jsファイルを取得することであると結論付けました。そして、これで説明されているようにuglifyjs-webpack-pluginを構成します 記事

これは完全にうまく機能し、実際には、angular-cliが最初にあなたを隠すWebpackをよりきめ細かく制御することができます。

私は他の提案/回答を受け入れていますので、ここに自由に追加してください！

可能であれば、angular-cliを使用する方法を見つけたいと思っています。

angularwebpackecmascript-6angular-cliuglifyjs
14
mindparse

私はあなたの問題を解決するための3つのオプションを見ることができます：

  1. 最新のAngular cliを含むバージョンに更新し、プロジェクトを再構築します。これで問題ありません。（最適なオプション）
  2. 何らかの理由で（gitリポジトリにプロジェクトの最小バージョンしか表示されないため）、更新できません。あなたが試すことができます "uglify-js": "github:mishoo/UglifyJS2#harmony"これはUglifyJSのes6対応バージョンです
  3. すでに発見したように、いつでも構成を取り出して微調整できます（より高度なオプション）
1
113408