web-dev-qa-db-ja.com

Requirejs vs browserify vs jsのWebpackの読み込み順序：状況を一方から他方に移動しているだけですか？

OK、2016年です。 Webpack は、 requirejs および に勝ったようですbrowserify 。非常に具体的な問題を解決するために、これら3つのテクノロジーについて読んでいます。 HTMLファイル（AngularJSアプリケーションの一部）でこれを避けたい]

<script src="some-file.js"></script>
<script src="some-file2.js"></script>
<script src="some-file3.js"></script>
<!-- Dozens of similar lines here... -->

もちろんHTMLファイルのこれらの行の順序は重要です。 BootstrapはjQueryなどを要求します。

最初に見つけたのはrequirejsです。次のように指定するだけです。

<script src="my-bundled-file.js"></script>

そして、JSで依存関係の問題を解決します。さらに進んで、私はここに2つのアプローチを見つけました：

  • CommonJS（ブラウザ化）
  • AMD（require.js）

Webpackは両方のアプローチで機能します。

最後に、3つのツールを同じ目的で使用できます：複数のファイルを1つにまとめる。しかし、私が心配しているのはこれらのファイルがバンドルされる順序です。

私はこれを気にしたくなく、それらのソリューションを使用しているように見えます（またはgulp + gulp-concat、提案されているように here ）、-I問題を移動しています：今、アプリケーションがJSコードで使用するモジュールを指定していますが、WebPackでも、モジュールを正しい順序で配置する必要があります（例 here ：require呼び出しは正しい順序でなければなりません）

だから、私の質問：

  • これらのツールを誤解していますか？読み込み順序の問題を解決したいのですが、実行していないようです
  • これらのツールは別の問題を解決しますか（グローバルスコープを汚染する原因となるES5のネイティブモジュールの欠如）？
javascriptrequirejswebpackbrowserify
17
Jorge Arévalo

これらのツールを誤解していますか？読み込み順序の問題を解決したいのですが、実行していないようです

そうだと思います。 CommonJSとそれをバンドルするツールでは、ロードの順序はほとんど関係がなくなり、管理する必要はありません。必要な場所に必要なものをrequire()するだけです。それがまだ関連している場合もありますが、ほとんどの場合、グローバルな副作用や循環依存関係などに関係しています。 CommonJSを使用してバンドルすることは、一連のスクリプトを連結することとはまったく異なります。

これらのツールは別の問題を解決しますか（グローバルスコープを汚染する原因となるES5のネイティブモジュールの欠如）？

CommonJSモジュールシステムは、JavaScriptのネイティブモジュールの欠如に対処するように設計されており、そのバージョンはNodeで使用されます。 Browserifyの見出しは「ブラウザのバンドルノードモジュール」ですが、実際にはNodeで実行するバンドルの作成や、ブラウザでの実行のみを目的としたバンドルモジュールにも使用されます。

Nodeでは、モジュールをバンドルする必要はありません。これは、Nodeが実行するコードをラップし、そのモジュールセマンティクスの実装を提供するためです。ブラウザーでそのシステムを使用してモジュールを実行するには、ブラウザーがコードをラップしてモジュールインターフェイスを構成するもの（require()、moduleなど）を提供しないため、それをバンドルする必要があります。 、exports。これは、バンドラーがあなたのために行うことの一部です。そのインターフェースを提供するためにコードをラップします。

順序付けに関する質問に対処するもう1つのことは、依存関係を再帰的に発見することです。だから私が言ったように、あなたはあなたがそれを必要とするところにあなたが必要なものをrequire()し、そしてエントリースクリプトにバンドラーを指す。バンドラーはスクリプトを分析してrequire() sを見つけ、それらが参照するモジュールをバンドルに含めます。これらのモジュールについても、無限に繰り返されます。

AMDよりもCommonJSの方がはるかに魅力的だと思いますが、BrowserifyよりもWebpackの方が明らかに勝っているとは言えません。どちらも人気です。 Browserifyは、BabelやReactなどのプロジェクトの一部を構築する場合を含め、広く使用されています。

私のアドバイスは、NodeスタイルのCommonJSモジュールとBrowserifyから始めることです（注：私はBrowserifyのメンテナーです）。

あなたがこれをよりよく理解するまで、私はCommonJSのモジュール化に関してどのようにすべきかについてのリファレンスとしてAngularを含むものを使用しないことをお勧めします。 Angular npmパッケージを適切なCommonJSの形にするだけで、多くの問題が発生したと思います。

9
JMM