キーポイント

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

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

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

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

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

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

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

bower install requirejs --save

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

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

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

ファイル：mylib.jsdefine()

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

。これは、このモジュールの依存関係リストです。配列內(nèi)のすべてのモジュールは、このモジュールの前にロードされます。このモジュールを?qū)g行するとき、パラメーターは依存関係アレイ內(nèi)の対応するモジュールです。

define(['jquery'], function($) {
    // $現(xiàn)在是jquery。

    return 'mylib';
});

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

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

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

ファイル：main.js

bower install requirejs --save

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

configure requirejs optimizer：r.js

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

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

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

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

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

ファイル：Tools/build.js

define(['jquery'], function($) {
    // $現(xiàn)在是jquery。

    return 'mylib';
});

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

さまざまなアクションを?qū)g行し、構(gòu)成ファイルを使用してプロジェクトビルドを調(diào)整できます。 ConfigurationとRequireJの詳細(xì)については、ドキュメントとWikiを參照することをお?jiǎng)幛幛筏蓼?。また、ビルドシステムの使用方法を示すサンプル?gòu)成ファイルもありますので、必ず參照してください。

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

define(['jquery', 'mylib'], function($, mylib) {
    // $照常是jquery
    // mylib是字符串`mylib`，因?yàn)檫@是第一個(gè)模塊的返回值
    //

    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、次にパス設(shè)定、次にモジュール名に続いて.JSサフィックスを追加することに注意してください。そこで、jqueryやmylibなどのファイルにモジュールをマッピングする方法を指定できます。

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

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

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

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

アーモンド

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

ライブラリをパック

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

ファイル：wrap.start

bower install requirejs --save

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

ファイル：wrap.end

define(['jquery'], function($) {
    // $現(xiàn)在是jquery。

    return 'mylib';
});

ユーザーがAMDローダーを使用する場(chǎng)合、構(gòu)築されたファイルはAMD依存関係として「jQuery」を要求します。消費(fèi)者がブラウザのグローバル変數(shù)のみを使用している場(chǎng)合、ライブラリは$グローバル変數(shù)を取得し、jQuery依存関係に使用します。

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

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

ファイル：app.js

define(['jquery', 'mylib'], function($, mylib) {
    // $照常是jquery
    // mylib是字符串`mylib`，因?yàn)檫@是第一個(gè)模塊的返回值
    //

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

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

browserのrequirejsを構(gòu)成

ファイル內(nèi)のrequirejsを構(gòu)成し、アプリモジュールを?qū)g行します。ただし、これを行うにはさまざまな方法があります。

ファイル：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とパスの構(gòu)成は以前と同じです。ここの追加の構(gòu)成値は次のとおりです

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

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

を要求して定義します

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

スクリプトの読み込み

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

bower install requirejs --save

結(jié)論

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上がrequirejsを使用してライブラリを構(gòu)築しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。