SystemJS/jspmを使用してプロダクションで非同期のes5モジュールをロード

Question

System.import()を使用して非同期に依存関係をロードすることができますが、実動時にES6をES5に移行する必要はありません。私は、これらのモジュールを別々のES5モジュールに移して、必要なときにだけ取り出します。私はそれらをメインバンドルの一部にしたくありません。

Devのワークフロー

モジュールを効率的に私はtranspilationを可能とする任意の依存関係を含めるしたくないので、実際に気になる私の生産ビルド時にロードされています。

私はjspm bundleとjspm unbundleを使用してワークフローを作成しており、開発と運用の設定を切り替えることができます。私の開発環境では、私は次のスクリプトを含めています：

<script src="jspm_packages/system.js"></script> 
<script src="config.js"></script> 

<script> 
    System.import('src/main'); 
</script> 

制作ワークフローの生産で

、私はSystem.configにbundlesオプションを注入するjspm bundle --injectを使用しています。これは、効果的に必要なファイルだけをロードします。

system.js 
config.js 
main.bundle.js 

私は製造時にSystem.import()と非同期モジュールをロードしようと、それはtranspilationは、生産中のブラウザで起こっていることを意味し、罰金ロードします。

---

質問

1. 私は簡単にAMDに私の各モジュールを構築することができますが、どのように私はまだ非同期に、別途System.import()を使用してそれらをフェッチ ことができますか？

2. という可能性があります。つまり、 を実行するスクリプトは含まれていません。 に の機能を持たない方法がありますか？

Answer 1

回答1

System.import（）はロードモジュールのために使用されます。モジュールは、関数やObject、Classなどの何かをエクスポートする必須の.jsファイルです。

あなたは別のファイルにコードを整理するなら、あなたはどちらか使用して別のファイルの頭の中でそれらをロードすることができます。..

import * as YM from 'YourModuleFile'; 

これは、ファイル全体ではYMにアクセスできるようになります。

それとも、YMはなく、ボタンのクリックにロードしたい場合は...

element.onclick = function() { 
    System.import('YourModuleFile').then(function(YM) { 
     // YM accessible here 
    }) 
} 

だから、重要なことは、ファイル/モジュール内だけでなく、あなたのコードの整理になります。もちろん

あなたは、その後など、ファイルを圧縮するためにこのような一気などNPMタスクランナーを使用する場合があります

、あなたは、このような...

としてごsystemjs.config.jsファイル内のいくつかのマッピングを入力する必要があります ​​3210

SystemJSがそれを見つけることができるように。

回答2

JSPMは、私は確かSystemJSがないじゃない、tranpile能力を持っています。

JSPM（またはあなたの選択したツール）がファイルを透明にしていることを確認します。次に、SystemJSをトランスファイルにポイントします。