requirejsを使用してライブラリを構築します

キーポイント

• requirejsは、非同期にスクリプトとCSSファイルをロードし、依存関係を管理し、コード構造を構築するブラウザー用のAMDモジュールローダーです。また、生産環境向けの最適化ツールも含まれています。
• requirejsを使用する場合、コードをモジュール定義にラップする必要があります。モジュールは他のモジュールで参照でき、モジュール自体がロードされる前にすべての依存関係がロードされます。
• requirejs optimizer r.jsは、すべてのモジュールを単一のファイルに構築するように構成できます。この構成は、AMDモジュールとしてもブラウザでもグローバルエクスポートとして、モジュールを独立したグローバルライブラリにすることもできます。
• requirejを使用して、それらを使用するライブラリとアプリケーションを構築できます。このプロセスには、AMDモジュールの定義と使用、R.JSオプティマイザーの構成、およびブラウザ内のrequireJSの構成を行い、適切に構築され、編成されたコードを生成します。

requirejsは、スクリプトとCSSファイルを非同期にロードできるブラウザー用のAMDモジュールローダーです。単一のファイル（index.htmlなど）でスクリプトファイルの順序を処理する必要はなくなりました。代わりに、モジュール定義でコードをラップするだけで、要求は依存関係管理に責任を負い、コード構造をより明確にし、より整理します。また、生産環境にファイルを圧縮および接続する最適化ツールもあります。

公式ウェブサイトは、そのAPIに関する詳細なドキュメントを提供しており、サンプルコードベースがたくさんあります。ただし、多くの構成があり、requirejsを使用することは最初は難しいです。

この記事では、AMDモジュールを備えたライブラリを構築し、最適化し、requireJSオプティマイザーを使用してスタンドアロンモジュールとしてエクスポートすることにより、requirejsを使用する方法を学びます。その後、requirejsを使用してアプリケーションを構築し、ライブラリを使用します。

このチュートリアルでは、requirejsを特定の理解があることを前提としています。 Get-Startガイドをお探しの場合は、効率的なJavaScriptモジュールの読み込みについてRequireJSを理解してください。

インストールはJS requirejsは、bower：を介してインストールできます

またはgithubからファイルを取得できます。

bower install requirejs --save

requirejsプロジェクト用のgruntベースのヨーマンジェネレーターもあります。

AMDモジュールを定義します

でコードをラップします。これにより、AMDモジュールになります。

ファイル：mylib.jsdefine()

それだけです。この場合、オプションの最初のパラメーター、依存関係アレイを受け入れることに注意してください

。これは、このモジュールの依存関係リストです。配列内のすべてのモジュールは、このモジュールの前にロードされます。このモジュールを実行するとき、パラメーターは依存関係アレイ内の対応するモジュールです。

define(['jquery'], function($) {
    // $现在是jquery。

    return 'mylib';
});

この場合、jQueryは最初にロードされ、次にパラメーター$として関数に渡され、モジュールで安全に使用できます。最後に、モジュールは文字列を返します。返品値は、このモジュールが必要な場合に関数パラメーターに渡されるものです。 define()

他のモジュールを引用します

2番目のモジュールを定義し、最初のモジュールmylib.jsを参照することにより、それがどのように機能するかを見てみましょう。

ファイル：main.js

bower install requirejs --save

依存関係配列内の任意の数の依存関係を参照できます。すべてのモジュールは、同じ順序で関数パラメーターによって提供されます。この2番目のモジュールでは、jQueryモジュールとMylibモジュールを参照し、特定の変数を公開するオブジェクトを単純に返すだけです。このライブラリのユーザーは、このオブジェクトをライブラリとして使用します。

configure requirejs optimizer：r.js

依存関係配列の文字列を見るだけで、どのファイルをロードするファイルを要求するのか疑問に思うかもしれません。この例では、jqueryとmylibを文字列として提供します。 mylibは非常にシンプルで、mylib.jsで、.jsを省略しています。

jqueryはどこにありますか？これが必要なJS構成のためです。 requirejs構成を介して幅広い構成を提供できます。 requireJSオプティマイザーを使用しているため、この構成を提供するには2つの方法があります。R.JSメソッドを表示します。 R.JSはrequirejsオプティマイザーです。

すべてのモジュールを単一のファイルに最適化する構成をR.JSに提供します。私たちが提供する構成により、R.JSはAMDモジュールとして、およびブラウザでのグローバルエクスポートの両方として、モジュールを独立したグローバルライブラリに組み込むことができます。

r.jsは、コマンドラインまたはノードモジュールを介して実行できます。また、Optimizer Grunt-Requirejsを実行するためのグラントタスクもあります。

と言われているので、私たちの構成がどのように見えるか見てみましょう：

ファイル：Tools/build.js

define(['jquery'], function($) {
    // $现在是jquery。

    return 'mylib';
});

構成ファイルは、実際にはrequirejsのコアです。これらのパラメーターがどのように機能するかを理解したら、専門家のようなrequirejsを使用できます。

さまざまなアクションを実行し、構成ファイルを使用してプロジェクトビルドを調整できます。 ConfigurationとRequireJの詳細については、ドキュメントとWikiを参照することをお勧めします。また、ビルドシステムの使用方法を示すサンプル構成ファイルもありますので、必ず参照してください。

最後に、実際にオプティマイザーを実行しました。前にも言ったように、コマンドラインまたはノードとグラントタスクを通じて実行できます。さまざまな環境でオプティマイザーを実行する方法については、R.JS ReadMeファイルを参照してください。

define(['jquery', 'mylib'], function($, mylib) {
    // $照常是jquery
    // mylib是字符串`mylib`，因为这是第一个模块的返回值
    //

    return {
        version: '0.0.1, jQuery版本：' + $.fn.jquery,
        mylibString: mylib
    }
});

これにより、dist/mylib.js

でビルドファイルが生成されます

build.js

次に、これらのパラメーターが実際に何を意味するか見てみましょう。

baseurl - すべてのモジュールが探すルートパス。

パス - ベースールのモジュール名に対するパスマップ。

私たちの例では、「mylib」はbaseurlに関連する「../main」にマップするため、「mylib」を参照すると、 "../lib/../mylib/mainをロードします。 JS」。 BaseURL、次にパス設定、次にモジュール名に続いて.JSサフィックスを追加することに注意してください。そこで、jqueryやmylibなどのファイルにモジュールをマッピングする方法を指定できます。

include - 最適化プロセスに含めるモジュール。含まれるモジュールに必要な依存関係は暗黙的に含まれています。この例では、メインモジュールはMyLibとjQueryに依存しており、これも含まれます。そのため、明示的に含める必要はありません。また、後で言及するアーモンドも含めます。

除外 - モジュール最適化プロセスから除外したいモジュール。私たちの場合、jQueryを除外しました。ライブラリを構築するユーザーは、jQueryライブラリを提供します。これは後で表示されます。

out - 最適化された出力ファイルの名前。

ラップ - ラップで指定された開始テキストとエンドテキストでビルドパッケージをラップします。最適化された出力ファイルは次のとおりです。lap.Startモジュールwrapped.Endが含まれています。 wrap.startとwrap.endは、出力に内容が含まれているファイル名です。

アーモンド

構築されたライブラリには、require.jsファイルは含まれていませんが、アーモンドを使用します。アーモンドは、require.jsを置き換える小さなAMD API実装です。

ライブラリをパック

r.js構成では、wrap.startおよびwrap.endファイルを使用してライブラリをラップします。また、ライブラリにアーモンドを含めて、ライブラリを独立させるため、ブラウザのグローバル変数を介して、またはrequireJSを介してAMDモジュールとして使用できます。

ファイル：wrap.start

bower install requirejs --save

メイン、マイリブ、アーモンドを含むモジュールは、wrap.startとwrap.endの真ん中にあります。

ファイル：wrap.end

define(['jquery'], function($) {
    // $现在是jquery。

    return 'mylib';
});

ユーザーがAMDローダーを使用する場合、構築されたファイルはAMD依存関係として「jQuery」を要求します。消費者がブラウザのグローバル変数のみを使用している場合、ライブラリは$グローバル変数を取得し、jQuery依存関係に使用します。

requirejsを使用してライブラリを使用しています

私たちのライブラリが完成しました。ここで、requirejsアプリケーションを構築することで実際にそれを使用しましょう。

ファイル：app.js

define(['jquery', 'mylib'], function($, mylib) {
    // $照常是jquery
    // mylib是字符串`mylib`，因为这是第一个模块的返回值
    //

    return {
        version: '0.0.1, jQuery版本：' + $.fn.jquery,
        mylibString: mylib
    }
});

ここでは特別なものはありません。これは、jqueryとmylibを参照する別のモジュールです。モジュールがdefineで定義されている場合、すぐに実行されません。つまり、コールバック関数（依存関係の配列の後に渡されます）はすぐに実行されません。これは、このモジュールを定義するだけではアプリケーションが起動されないことを意味します。次に、requirejsを構成し、実際にこのモジュールであるアプリケーションを実行する方法を見てみましょう。

browserのrequirejsを構成

ファイル内のrequirejsを構成し、アプリモジュールを実行します。ただし、これを行うにはさまざまな方法があります。

ファイル：common.js

{
  "baseUrl": "../lib",
  "paths": {
    "mylib": "../main"
  },
  "include": ["../tools/almond", "main"],
  "exclude": ["jquery"],
  "out": "../dist/mylib.js",
  "wrap": {
    "startFile": "wrap.start",
    "endFile": "wrap.end"
  }
}

baseurlとパスの構成は以前と同じです。ここの追加の構成値は次のとおりです

SHIM：依存関係を宣言してモジュール値を設定するためにdefine()を使用しない従来の「ブラウザグローバル」スクリプトの依存関係とエクスポートを構成します。たとえば、BackboneはAMDモジュールではありませんが、バックボーンをエクスポートで指定したグローバルネームスペースにエクスポートするブラウザグローバル変数です。この例では、モジュールはjQueryとアンダースコアにも依存しているため、DEPSを使用して指定します。 DEPSアレイのスクリプトはバックボーンをロードする前にロードされ、ロード後、エクスポート値はモジュール値として使用されます。

このアプリケーションプロジェクトでは、R.JSを使用することもできます。これには、個別の構成が必要です。しかし、それについて混乱しないでください。私はそれを行う方法の詳細については説明しませんが、これは私たちが図書館で行ったことに似ています。詳細については、サンプルビルド構成を参照してください。

を要求して定義します

必要なモジュールを使用してモジュールをロードし、すぐに実行します。定義して要求することは、使用するものを混乱させる場合があります。定義モジュールを定義しますが、実行することはなく、モジュールを定義し、実行する必要があります。つまり、それ自体を実行する前に従属モジュールをロードして実行します。通常、メインエントリモジュールとして要求があります。これは、定義を介して定義された他のモジュールに依存します。

スクリプトの読み込み

通常、index.htmlにすべてのスクリプトファイルを含めます。 requirejsを使用したので、requirejsを含めてデータ管理を指定する必要があります。これはアプリケーションのエントリポイントです。 index.htmlで使用されているメインモジュールを設定したり、デタッチするには多くの方法があります。詳細については、こちらをご覧ください。

bower install requirejs --save

結論

この記事では、requirejsを使用してライブラリを使用するライブラリとアプリケーションを構築しました。 R.JSオプティマイザーの構成方法と、ブラウザでrequireJSを構成する方法を学びました。最後に、requirejsを使用してAMDモジュールを定義および使用する方法を学びました。これにより、コードが十分に構築され、整理されます。

このチュートリアルの前半（構成オプティマイザー）では、この例を使用した場合、リブグロバルリポジトリを使用しました。後半は複雑ではないので、今すぐ自分でできるはずです。

公式requirejs Webサイトは最終的なドキュメントですが、githubのサンプルリポジトリと、要件アプリケーションの使用を実証するリポジトリのサンプルプロジェクトを必ずチェックしてください。

requirejsを使用したライブラリの構築に関するFAQ（FAQ）JavaScript開発における要件の主な目的は何ですか？

requirejsはJavaScriptファイルとモジュールローダーです。ブラウザの使用に最適化されていますが、他のJavaScript環境でも使用できます。 requireJSの主な目的は、JavaScriptでのモジュラープログラミングの使用を奨励することです。開発者がJavaScriptファイル間の依存関係を管理し、コードをモジュール化するのに役立ちます。これにより、コード組織、保守性、再利用性が向上します。また、コードの速度と品質も向上します。

requirejsはJavaScriptファイルの依存関係をどのように処理しますか？

requirejsは、非同期モジュール定義（AMD）APIを使用してJavaScriptモジュールを処理します。これらのモジュールは非同期にロードできます。つまり、他のスクリプトがロード時に実行されるのをブロックしないことを意味します。 requirejsを使用してモジュールを定義すると、その依存関係を指定します。必要に応じて、これらの依存関係がモジュール自体の前にロードされることを保証します。

requirejsを使用してモジュールを定義する方法は？

requirejsでモジュールを定義するには、define()関数を使用できます。この関数は、依存関係配列と工場関数の2つのパラメーターを取ります。依存関係は、モジュールが依存するファイルへのパスです。工場の関数は、モジュールコードを記述する場所です。この関数は、すべての依存関係がロードされると呼ばれます。

コードにrequirejsで定義されたモジュールを使用する方法は？

requirejsで定義されたモジュールを使用するには、require()関数を使用できます。この関数は、依存関係配列とコールバック関数の2つのパラメーターを受け入れます。依存関係は、使用するモジュールへのパスです。コールバック関数は、モジュールを使用する場所です。この関数は、すべてのモジュールがロードされると呼び出されます。

jQueryなどの他のJavaScriptライブラリでrequirejsを使用できますか？

はい、jQueryなどの他のJavaScriptライブラリを使用してrequirejsを使用できます。 requirejsには、define()を使用して依存関係を宣言し、「shim」と呼ばれるモジュール値を設定しない従来の非モジュラースクリプトを読み込むための組み込み機能があります。 Shimを使用すると、define()を使用して依存関係を宣言し、モジュール値を設定しないスクリプトの依存関係とエクスポートを指定できます。

requirejsでコードを最適化する方法は？

requirejsにはR.JSと呼ばれる最適化ツールが付属しています。このツールは、JavaScriptファイルとその依存関係を1つのファイルに組み合わせて圧縮します。これにより、HTTPリクエストとファイルサイズの数が減り、Webページの読み込み時間を大幅に改善できます。

requirejsのdefine（）とrequire（）の違いは何ですか？

define()関数はモジュールを定義するために使用され、require()関数はモジュールのロードに使用されます。両方の関数は、依存関係の配列とパラメーターとして関数を受け入れます。ただし、define()に渡された関数はモジュール値を作成するために使用されますが、モジュールの読み込み後にrequire()に渡された関数はコードを実行するために使用されます。

node.jsでrequirejsを使用できますか？

はい、node.jsでrequirejsを使用できます。ただし、node.jsには独自のモジュールシステムがあるため、おそらく必要はありません。ブラウザとnode.jsの両方で同じコードを使用する場合、またはAMD APIを希望する場合は、requirejsが適切な選択かもしれません。

requirejsのエラーに対処する方法は？

requirejsは、エラーを処理するためにonErrorコールバックを提供します。このコールバックは、モジュールのロード中にエラーが発生したときに呼び出されます。このコールバックを使用して、エラーからログまたは回復できます。

requirejsを使用してCSSファイルをロードできますか？

はい、require-cssプラグインを使用して、requirejsを使用してCSSファイルをロードできます。このプラグインを使用すると、JavaScriptモジュールと同じようにCSSファイルをロードおよび待機できます。

以上がrequirejsを使用してライブラリを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。