Webpack 2の角4、動的なスクリプトの読み込み

Question

プロジェクトのWebpack 2でAngular 4を使用しています。

ngOnInitでいくつかのスクリプトを読み込もうとしていて、問題が発生しています。

問題1）

私は私のngOnInit内で次のコードを持っている：

System.import(`../../node_modules/jquery/dist/jquery.js`); 
System.import(`../../node_modules/jquery-validation/dist/jquery.validate.js`); 
System.import(`../../node_modules/jquery-validation/dist/additional-methods.js`); 
System.import(`assets/js/regular-expressions.js`); 

私はこれを行うと、すべての資産をロードするように見えるが、私はのエラーを取得：

を

Uncaught (in promise): ReferenceError: $ is not defined

$をjQueryファイルで定義する必要があります。 regular-expressions.jsファイルがjQueryがロードされたことを認識しないのはなぜですか？

問題2）

最終的に、私は彼らがすべてのページに必要のないもの）（スクリプトをロードする動的にロードする必要があります。行動に差がある理由を私は理解していないのです

let script = 'assets/js/' + scripts[i].replace(/^\/|\/$/g, ''); 
/* The following two lines output the same exact text to the console */ 
console.log('assets/js/regular-expressions.js'); 
console.log('' + script + ''); 

/* The following hard-coded line works (as in the script is loaded, raising the $ issue mentioned above */ 
System.import('assets/js/regular-expressions.js'); 

/* The following line with a variable throws an error of "Cannot find module 'assets/js/regular-expressions.js'." */ 
System.import('' + script + ''); 

：

は、私は、次のコードを持っています。特に、System.importに渡される値がまったく同じ場合。

Answer 1

私は、これがウェブパックのかなり大きな（かなり大きな）制限だと分かりました。私はtree-shakingなどのアイデアを得ますが、WebPackは開発者が実行時にスクリプトを読み込むOPTIONを本当に許可するべきです。

私は今、このメソッドを使用して終了：https://stackoverflow.com/a/37844389/3389346

それはjQueryの上のアプリケーションの広い依存性を必要とするので、これが最大のではありません。私はWebPackの方々が開発者にスクリプトを片方向に読み込むオプションを許可することを決断した場合、それを修正して修正します。