問題タブ [es6-module-loader]

現在のすべてのモジュール ローダーはAMD,CommonJS,SystemJS、外部オブジェクトを現在のモジュール スコープにロードするために変数定義を使用するのと同様です

お気に入り：

また：

外部モジュールから何をインポートする必要があるのか​​ わからない場合、またはすべてをインポートする必要がある場合、実行時に変数を定義できないため、これが問題になります。

これが ES6 トランスレータが使用しない主な理由だと思います

構文であり、これらは ES6 仕様には含まれていません。

したがって、動的モジュールスコープとは、モジュール変数を実行時に定義/ロードできることを意味します。これにより、ES6 構文を次のように拡張できます。

私の見解では、これは、次のようなすべての名前をリストするよりも、インポートを定義するためのより最適な方法です。

今私の本当の質問：

withこれを達成するために使用しないのはなぜですか？

問題を解決できる ES6 から ES5 への簡単な変換例を次に示します。

ファイル: modules/module-1.js

に：

ファイル: modules/module-1.js

に：

withトランスパイラー/ローダーでも避ける必要は本当にありますか?

私は別の ES6to5 トランスレータとモジュール ローダーを作成することを考えているので、この人たちについてのあなたの考えに感謝します。:)

互換性の問題 (さまざまなブラウザー、縮小化など)、パフォーマンス、読みやすさ/保守性に特に注意しながら、以下の違いについて詳しく知りたいです。

1. ES6:exportとexport default構文import {module1, module2} from。

2. AMDdefine()構文。

3. CommonJSrequire()構文。

広く採用されている、より一般的なものはありますか? 大会はどこに行きますか、またその理由は? ES6 は急速に変化しているように見えるので、ES6 の次は何ですか。ES6 のモジュール ロード構文を現状のままにする歴史的な理由/動機はありますか?次は何ですか?

ES6 モジュールローダー (または System.js、Webpack などのポリフィル) の単純なステートメントimportとステートメントの違いを説明できる人はいますか?System.import

何かのようなもの

単純なだけでなく、可能であるようです

System.importimport ステートメントの後にコールバックを持つ唯一の可能性はありますか?

ES6 で実行される AngularJS アプリケーションの取得に取り組んでいました。歴史的に、私はコントローラ ファイルがアプリケーションに自身を登録できるようにするパターンを使用してきました。この方法では、ファイルが定義するコントローラ、サービスなどについて心配する必要がないからです。require() を使用することで、依存関係と初期化を簡単に順序付けて、コントローラー ファイルに集中できるようにすることができました。

ES6 への移行を検討し、require() ではなく import を使用すると、順序に依存するコードが機能しなくなっていることがわかりました。添付されているのは、私がやりたいことの大まかな近似 (決して実行しない) バージョンです。

私が理解した唯一のことは、RegisterIndexController() 関数を index.js からエクスポートして、app.js から呼び出すことができるということです。これは機能しますが、依存関係を別の方法でプッシュできるかどうか疑問に思っています。app.js から "app" をコントローラーに渡すことができる場所

app.js

index.js

index.html

角度のあるプロジェクトの一部を typescript に移行し、内部モジュール/名前空間に問題があることを検討しています。

この作業例を github に投稿しました: https://github.com/hikirsch/TypeScriptSystemJSAngularSampleApp

手順:

これはアプリケーションの要点です: index.ts

例Ctrl.ts

ExampleTwoCtrl.ts

述べたように、これはすべてうまく機能します。しかし、次のような名前空間の下にすべてを置きたいと思います。

そして、次のように使用します。

これにより、gulp バンドル タスクを実行して正しくコンパイルされますが、ブラウザでエラーが発生します /// ///

ブラウザ エラー:

私は jspm と system.js で動作する ES6 セットアップを持っています。npm または github を介して Boostrap をインストールしても、Bootstrap に必要なファイルが (もう) 提供されないため、そのエンドポイントが必要です。

ただし、いくつかの Bootstrap プラグインを使用したい (つまり、折りたたみ)。AMD や CommonJS 構文を持たない単純な jQuery プラグインであるため、グローバルに jQuery が必要です。

それを達成するためにsystem.jsのconfig.jsファイルをシムする方法はまったくわかりません。このようなカスタムオーバーライドを渡すことができます

これは、jQuery プラグインをシムする「公式の方法」のようです。

ただし、単一のプラグインだけでなく、複数のフォルダーとファイルを含むフレームワーク全体をインストールしています (したがって、上記のように、Bower エンドポイントを介して jspm の Bootstrap がインストールされます)。

助言がありますか？

troublesome(Webpack/Babel FWIWを使用して)呼び出す既存のライブラリをインポートしようとしているこの状況があり、jQueryモジュール構文を使用して解決しようとしているグローバル参照があります。

次の方法で、jquery をモジュールの「ローカル」スコープに正常にインポートしました。

だから私は試しました：

jQuery is not a functionしかし、おそらく驚くべきことではありませんが、キックバックのようなものが得られますtroublesome.js

私もこれを試しました：

System.importしかし、これは es6/2015 仕様から引き出された、いわゆる「モジュールローダー」仕様の一部であることが判明したため、Babel では提供されません。poly-fillがありますが、Webpack は への呼び出しを介して実行される動的インポートを管理できませSystem.importん。

しかし...次のようにindex.htmlでスクリプトファイルを呼び出すと:

への参照jQueryは解決されてtroublesome.jsおり、問題はありませんが、スクリプト タグ ルートは webpack で管理されないため、避けたいと思います。

このようなシナリオに対処するための適切な戦略を推奨できる人はいますか?

アップデート

@TN1ck からのガイダンスにより、最終的にimports-loaderを使用して、Webpack 中心のソリューションを 1 つ特定することができました。

このソリューションの構成は次のようになります。