Babel and Browserify/Webpackの混乱

Question

クイック質問。私はES2015（ES6）について少し混乱しています。

Babelを使用して、現在のブラウザのES6 Javascriptから準拠ES5にコンパイルするとします。

インポート/エクスポート機能は、すでにBabelを使用してES6で使用できます。だから、なぜ私はのようなものが必要なのでしょうか？BrowseritまたはWebpackもし私がES6が私のためにそれを行うことができたら、

どこでも私はBabifyをBrowserifyまたはWebpackと組み合わせて使用​​している人を見ています。私はWebpackのようなものをもっと知っていますが、ES6の構文を使ってファイルをバンドルすることも可能かどうか疑問です。

私はここで間違っているかもしれないし、2016年のJavascript Jungleで迷子になったかもしれないので、誰かが私のためにこれを明確にすることを願っています。

編集

私は右単にファイルをバンドルしていないネイティブES6のインポート/エクスポート機能と想定するのですか？私が今まで読んだことから、別々のJavascriptファイルをすべてインクルードする必要があると思いますが、ネイティブインポート機能を使用してモジュールを各他の名前空間にインポートするだけです。

Answer 1

Pre-ES6にはネイティブモジュールシステムがないため、ユーザーランドコード（CommonJS/NodeモジュールとAMDなど）に複数のシステムが構築されています。これらはBabelがES6モジュールの構文を変換するものです（とはいっても、ES6モジュールの構文にはネイティブバンドリングのストーリーはありません）。ブラウザは、これらのユーザーランドAPIについての知識がありません。ノードは、require()などを注入する関数に "module"をラップすることによってモジュールシステムを実装します。ブラウザではrequire()は参照エラーになります。 Browserify（または他のバンドラ）はブラウザで動作させ、依存関係グラフ全体を単一のスクリプトにまとめます。したがって、コードがブラウザ用のものであれば、それをバンドルしたいと思うでしょう。それがノードの場合は、必要ではないかもしれません。

インポート/エクスポート機能

ない機能、宣言。

もし私が単に私のモジュールをバンドルするために使うのであれば、ES6はそれを私のために行うことができますか？

ES6の構文を使用してファイルをバンドルすることも可能かどうかと思います。

ネイティブのES6インポート/エクスポート機能が単にファイルをバンドルしていないと思いますか？

はい。 ES6モジュールをバンドルする方法はありません。 ES6モジュールのシンタックスをNodeモジュールのようなものに置き換えてバンドルすることができます。

これまでに読んだことは、別々のJavascriptファイルをすべて組み込む必要があると思いますが、ネイティブインポート機能を使用してモジュールを各他の名前空間にインポートするだけですか？

シンタックスは標準化されていますが、多くの動作は理解できません。開発中のLoader仕様は、モジュールの実際の配置方法とロード方法を指定します。

https://stackoverflow.com/a/33044085/1034448も参照してください。

Answer 2

はい、バベルを使ってES6へのインポートをES5に移行することができます。

ただし、webpackを使用する利点の1つは、運用環境で提供される1つの静的ファイルを作成することです。