今日は JS のモジュール化 - RequireJS について説明します。JS のモジュール化と RequireJS の使用方法に関する 注意事項 について説明します。以下は実際的なケースですので、見てみましょう。
RequireJS については以前から聞いたことはありましたが、理解する機会がありませんでした。JS の モジュール化 のための API であることしか知りませんでした。私は最近 React に取り組んでいますが、そのコンポーネント化の考え方は JS のモジュール化の考え方と一致しています。 React を適用しているときに RequireJS をプロジェクトに追加して、ページの読み込みや開発に良い影響を与えるかどうかを確認したいだけです。
RequireJSとは何ですか?
RequireJSとは何かを説明する前に、Javascriptのモジュール化の歴史の背景に触れなければなりません。実際、初期の頃、JavaScript は大きなビジョンを持った新興のスクリプト言語として登場しましたが、クライアント専用に設計された言語ではありませんでした。ただ、その後の Web アプリケーションの人気により、JavaScript はブラウザ側のスクリプト言語として急速に普及し、Netscape と Microsoft の間の競争により時期尚早に標準化されてしまいました。これにより、JS の多くの欠陥が生じました。その 1 つはモジュール性です (しかし、JavaScript が実際に import 、export などを予約語として使用していることに驚くでしょう。これは、それが設計時に実際に考慮されたことを示しています)。新しい標準es6 では、モジュール化をネイティブでサポートすることもできます)。その後、Web アプリケーションがますます複雑になるにつれて、ますます多くの JavaScript コードが埋め込まれ、ノードの台頭によりモジュール式プログラミングが必須になります。
それで、後に Dojo ツールキットと Google の Closure ライブラリによってサポートされるモジュール システムが登場しました。 CommonJS と AMD という 2 つの非常に一般的な標準仕様もあります。ここでは詳細には触れませんが、CommonJS 仕様を実装する API はモジュールを同期的にロードし、AMD 仕様を実装する API はモジュールを非同期的にロードすることだけを理解する必要があります。
理論的には、AMD 仕様のノンブロッキング読み込みの方がブラウザ側に適しています。 RequireJS は、AMD 仕様の最良の実装です。公式ドキュメントから RequireJS の説明をコピーします:
RequireJS は JavaScript モジュール ローダーです。ブラウザでの使用に最適ですが、Rhino や Node などの他のスクリプト環境でも使用できます。RequireJS を使用してモジュール スクリプトを読み込むと、コードの読み込み速度と品質が向上します。
なぜ RequireJS が必要なのでしょうか?
ということで、RequireJS が何をするのかがわかったので、RequireJS を使用する理由もほぼわかりました。 RequireJS を使用するメリットをまとめてみましょう。
非同期「読み込み」。通常、Web サイトでは、ブラウザーによる js の実行によって引き起こされるページのブロックを避けるために、スクリプトを html の最後に配置することがわかっています。 RequireJS を使用すると、関連する js が読み込まれた後に コールバック関数 が実行されます。このプロセスは非同期であるため、ページはブロックされません。
オンデマンドでロードします。 RequireJS を使用すると、JS ロジックをロードする必要があるときに対応する JS モジュールをロードできるため、Web ページの初期化時に大量のリクエストやデータ送信が回避されるため、一部のモジュールがまったく利用できない場合があります。必要な場合は不要に思えます。
モジュールの依存関係管理がさらに便利になりました。この関数は未定義、その変数は未定義などの理由で、依存関係エラーが発生したと思います。 RequireJS のメカニズムを通じて、すべての依存モジュールがロードされた後に関連ファイルが確実に実行されるようにすることができるため、依存関係の管理において役割を果たすことができます。
より効率的なバージョン管理。 jQuery2.Go を導入するためにまだスクリプトを使用している場合は、これらの 100 ページを変更してください。ただし、requireJS の構成に jQuery パス マッピングがある場合、変更する必要があるのは 1 か所だけです。
もちろん、cdn が js ファイルをロードできない、ローカル ファイルをリクエストできるなど、他の利点もあります。ここではすべてをリストすることはしません。
RequireJSは、ページ内で導入する必要がある
ファイルを使用します
RequireJSを使用する場合、require.jsを導入するだけで済みます。この js はページ上の
