RequireJS-クイックガイド
RequireJSは、JavaScriptファイル間の依存関係とモジュラープログラミングを管理するJavaScriptライブラリおよびファイルローダーです。また、コードの速度と品質を向上させるのにも役立ちます。
RequireJSはDavidMarkによって開発され、その初期バージョンv1.0.0は2009年にリリースされました。これはオープンソースであり、バージョン2.3.3は最近の安定したリリースです。
なぜRequireJSを使用するのですか？
これは、MITライセンスに基づくオープンソースのJavaScriptライブラリです。
非同期モジュールのロードを提供します。
ネストされた依存関係をロードする機能があります。
小さなファイルがたくさんある場合は、依存関係の順序を追跡することを心配する必要はありません。
プラグインのサポートを提供し、複数のJavaScriptファイルをロードします。
RequireJSの機能
JavaScriptファイル間の依存関係を管理し、コードの速度と品質を向上させます。
モジュールを組み合わせて1つのスクリプトに縮小し、最適化されたエクスペリエンスを実現します。
大規模なアプリケーションでのコードの複雑さを軽減します。
コンパイル時に、さまざまなモジュールからさまざまなJavaScriptファイルを収集します。
プレーンなスクリプトタグからファイルをロードするため、簡単にデバッグできます。
この章では、RequireJSの環境をセットアップする方法を理解します。このためには、RequireJSライブラリの最新バージョンをダウンロードする必要があります。縮小版または詳細版のいずれかをダウンロードできます。
ダウンロード後、含める必要があります require.js libsフォルダー内のファイルとプロジェクトの構造は次のようになります-
projectname/
|--index.html
|--libs/
|---main.js
|---require.js
|---helper/
|----util.jshtmlファイルを次のように定義する必要があります index.html ここで、RequireJSは次のようにロードされます。
<html>
<head>
<script data-main = "libs/main" src = "libs/require.js"></script>
</head>
<body>
<h1> RequireJS Sample Page </h1>
</body>
</html>のみ注意してください require.js RequireJS呼び出しは、スクリプトをロードするためのscriptタグに含まれています。
ノードのRequireJS
ノードアダプタを入手するには2つの方法があります。
npm −以下に示すように、コマンドプロンプトからrequirejsの最新リリースをインストールできます。
npm install requirejsダウンロード r.js −ダウンロードできます r.jsダウンロードページからのファイルとからのソースr.js リポジトリページ。
RequireJSは、HTMLテンプレートのメイン構成をdata-main属性を介して渡すことで初期化できます。これは、アプリケーションにロードするモジュールを知るためにRequireJSによって使用されます。
たとえば-
<script data-main = "scripts/main" src = "scripts/require.js"></script>Require.jsファイルを含めるには、htmlファイルにscriptタグを追加する必要があります。スクリプトタグ内に、data-mainモジュールをロードするための属性。これは、アプリケーションへの主要なエントリポイントと見なすことができます。スクリプト/メインはRequireJSの設定が含まれているアプリケーションのメインJavaScriptファイルです。
構成オプション
以下は、最初のアプリケーションモジュールのロード中に設定できる構成オプションです。
baseUrl−これは、RequireJSを介してロードされるすべてのモジュールのルートパスです。baseUrlは、「スラッシュ（/）」で始まり、プロトコルを含み、拡張子が「.js」で終わる文字列で示されます。baseUrlが指定されていない場合、RequireJSはdata-main属性パスをbaseUrlとして使用します。
paths−baseUrlに相対的なモジュールのパスマッピングを指定します。モジュール名をマッピングするときに、パスに.js拡張子が自動的に追加されます。
shim −依存関係を構成し、グローバル値をエクスポートすることにより、RequireJSでAMD以外のライブラリの使用法を提供します。
map −特定のモジュールについて、アプリケーションは、IDを共有してさまざまな条件で同じコードを使用することにより、さまざまな目的でさまざまなバージョンの同じモジュールを使用します。
config− configオプションを使用してモジュールに構成を提供します。これは、特別な依存関係「module」を使用して、module.config() 関数。
urlArgs−クエリ文字列引数は、RequireJSを使用してロードされるすべてのリソースをフェッチするために使用されます。ブラウザまたはサーバーの設定が不適切な場合のキャッシュバスティングに使用されます。
waitSeconds−スクリプトのロードをスローする前に待機する秒数を指定します。デフォルトは「7」秒で、「0」はタイムアウトを無効にします。
packages −ロードモジュールを構成するためのCommonJSパッケージを提供します。
context −ページ内のさまざまなモジュールのロードを可能にするコンテキストロードの名前を提供します。
deps − RequireJSをロードする前に、構成オブジェクトとしてRequireが指定されている場合に必要な依存関係の配列です。
callback −依存関係をロードした後に関数を実行し、RequireJSをロードする前に構成オブジェクトとしてRequireが指定されている場合に必要です。
xhtml −を使用してスクリプト要素を作成するために使用されます document.createElementNS()このオプションがtrueに設定されている場合のメソッド。
scriptType−ドキュメントで使用されるスクリプトタイプ属性の値を定義します。デフォルトのタイプは「text / javascript」です。
skipDataMain−このオプションがtrueに設定されている場合、モジュールのロード中にデータメイン属性のスキャンをスキップします。
RequireJSのモジュールはスコープオブジェクトであり、グローバル名前空間では使用できません。したがって、グローバル名前空間は汚染されません。RequireJS構文を使用すると、依存関係の順序を追跡する必要がなく、モジュールをより高速にロードできます。同じページに同じモジュールの複数のバージョンをロードできます。
モジュールの定義
モジュールは、を使用して定義されます define()関数; 同じ関数がモジュールのロードにも使用されます。
単純な名前と値のペア
モジュールが名前と値のペアの単なるコレクションである場合は、次の構文を使用できます-
define({
state: "karnataka",
city: "bangalore"
});関数の定義
モジュールは、依存関係がなくても、フレームワークの関数を使用できます。これは、次の構文を使用して実行できます-
define(function () {
//Do setup work here
return {
state: "karnataka",
city: "bangalore"
}
});依存関係のある関数の定義
モジュールに依存関係がある場合、最初の引数（依存関係名の配列）、2番目の引数（関数の定義）、およびモジュールを定義する戻りオブジェクトの配置は、次の構文で示されます。
define(["./mnc", "./startup"],
function(mnc, startup) {
return {
state: "karnataka",
city: "bangalore",
addCompany: function() {
mnc.decrement(this);
startup.add(this);
}
}
}
);モジュールを関数として定義する
モジュールがオブジェクトのみを返すことは必須ではありません。関数からの有効な値も返すことができます。次の構文は、モジュールを関数として定義するために使用されます-
define(["./mnc", "./startup"],
function(mnc, startup) {
return function(title) {
return title ? (window.title = title) :
startup.storeName + ' ' + mnc.name;
}
}
);名前を使用したモジュールの定義
場合によっては、最初の引数としてモジュールの名前を含める必要があります。 define()。これは、次の構文を使用して実行できます-
define("js2/title",
["js1/mnc", "js1/startup"],
function(mnc, startup) {
//Define js2/title object in here.
}
);モジュールのロード
定義（）関数は、モジュールをロードするために使用することができる（モジュール、オブジェクト、関数、クラスまたはモジュールをロードした後に実行されるコードであることができます）。同じページに同じモジュールの異なるバージョンをロードできます。異なるバージョンは、異なる順序でロードされている場合でも、同じ順序で分析できます。
構文
define(['module1', 'module2'], function (module1, module2) {
//define the module value by returning a value
return function () {};
});モジュールを定義するときにモジュール名のリストを渡すことができ、モジュールを実行する前にRequireJSを使用してこれらのモジュールを取得できます。これらのモジュールは、のパラメータとして渡すことができますdefinition function。
例
次の例は、モジュールのロード中のdefine（）関数の使用法を示しています。index.htmlという名前のhtmlファイルを作成し、その中に次のコードを配置します-
<!DOCTYPE html>
<html>
<head>
<title>Define() Function</title>
<script data-main = "main" src = "require.js"></script>
</head>
<body>
<h2>RequireJS Define() Function Example</h2>
</body>
</html>作成する jsmain.jsという名前のファイルに次のコードを追加します-
define(function (require) {
var myteam = require("./team");
var mylogger = require("./player");
alert("Player Name : " + myteam.player);
mylogger.myfunc();
});次に、さらに2つ作成します jsteam.jsおよびplayer.jsという名前のファイルを作成し、それぞれ次のコードを配置します-
team.js
define({
player: "Sachin Tendulkar",
team : "India"
});player.js
define(function (require) {
var myteam = require("./team");
return {
myfunc: function () {
document.write("Name: " + myteam.player + ", Country: " + myteam.team);
}
};
});出力
HTMLファイルをブラウザで開きます。次のスクリーンショットのような出力が表示されます-
「OK」ボタンをクリックすると、モジュールから別の出力が得られます-
この章では、RequireJSでの最適化について説明します。RequireJSのオプティマイザーには次の特徴があります-
一緒の助けを借りて、コンバインのスクリプトファイルUglifyJSデフォルトの使用またはのため閉鎖コンパイラのJavaの使用法について
CSSファイルを結合します。
オプティマイザーはのコンポーネントです r.jsNodeおよびNashorn用のアダプター。これは、開発プロセスではなく、ビルドプロセスの一部として開発されています。
例
プロジェクトフォルダにr.jsをダウンロードすると、フォルダの構造は次のようになります。
projectfolder/
|-->index.html
|-->CSS/
|--->main.css
|--->other.css
|-->libs
|--->require.js
|--->main.js
|--->dependent1.js
|--->dependent2.js
|--->dependent3.jsHTMLファイルは次のようになります-
<html>
<head>
<script data-main = "libs/main" src = "libs/require.js"></script>
</head>
<body>
<h1> RequireJS Sample Page </h1>
</body>
</html>あなたのmain.js以下のようにファイルが検索されます-
require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2,
dependent3) {
});あなたのmain.cssの下に示すように、ファイルを検索します-
@import url("other.css");
.app {
background: transparent url(../../img/app.png);
}オプティマイザーの基本設定
プロジェクトを設定するためにコマンドライン引数またはプロファイル構築プロパティを使用できます。どちらも相互に交換可能です。
以下はコマンドラインの構文です-
node r.js -o baseUrl = . paths.jquery = content/path/jquery
name = main out = main-built.js以下は、プロファイルを構築するための構文です。
({
baseUrl: ".",
paths: {
jquery: "content/path/jquery"
},
name: "main",
out: "main-built.js"
})この後、以下に示すように、コマンドラインでビルドプロファイル名をオプティマイザーに渡すことができます-
node r.js -o build.jsコマンドライン引数の構文にはいくつかの欠点があります。コマンドライン引数またはプロファイル構築プロパティの両方を組み合わせて使用すると、これらの欠点を克服できます。
単一のJSファイルの最適化
単一のJSファイルを最適化するには、すべての依存関係のコンテンツを含むJSファイルを作成する必要があります。ファイルは次のようになります-
({
baseUrl: "js/shop",
paths: {
"jquery": "jquery",
"backbone": "backbone",
"underscore": "underscore"
},
shim: {
"backbone": {
"department": ["underscore", "jquery"],
"dependent": "Backbone"
},
"underscore": {
exports: "_"
}
},
name: "../main",
out: "../built/js/main.js"
})これで、アプリのすべての依存関係を持つmain.jsファイルを作成できます。このファイルは、1回のリクエストですべてのJSファイルをロードするためにHTMLファイルで使用されます。作成されたファイルはソースコードディレクトリにあるべきではないことに注意してください。ファイルはプロジェクトのコピーにある必要があります。
CDNリソースの使用
オプティマイザーは、ネットワークリソース/ CDN（コンテンツ配信ネットワーク）を使用してスクリプトをロードしません。CDNを使用してスクリプトをロードする必要がある場合は、これらのファイルをモジュール名にマップし、ファイルをローカルファイルパスにダウンロードする必要があります。次の構文に示すように、ビルドプロファイルのパス構成で「空」という特別な単語を使用できます。
({
baseUrl: "js",
name: "mainCDN",
out: "js/mainCDN-built.js",
paths: {
jquery: "empty:"
}
})メインファイルは以下のようになります-
requirejs.config({
paths: {
'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
}
});
require(['jquery'], function ($) {
});単一のCSSファイルの最適化
CSSファイルは、以下に示すように、コマンドラインで直接次のパラメーターを使用して最適化されます-
node ../../r.js -o cssIn = main.css out = main-built.cssCSSファイルは、以下に示すのと同じプロパティを使用してビルドファイルで最適化することもできます-
...
cssIn:"main.css",
out:"main-built.css"
...上記の両方の方法が許可されており、projectfolder / css /mainbuild.cssというファイルが作成されます。このファイルには、main.cssの内容が含まれ、url（）パスが適切に調整され、コメントが削除されます。
プロジェクト全体の最適化
オプティマイザーはビルドプロファイルを使用して、すべての css そして jsファイル。次の例では、build.jsファイルが作成されます。
({
baseUrl: "js/shop",
appDir: '.',
paths: {
"jquery": "jquery",
"backbone": "backbone",
"underscore": "underscore"
},
shim: {
"backbone": {
"deps": ["underscore", "jquery"],
"exports": "Backbone"
},
"underscore": {
exports: "_"
}
},
optimizeCss: "standard.keepLines",
modules: [
{
name: "app"
}
],
dir: "../built"
})build.jsの構築された出力フォルダ（ディレクトリのパラメータ）に（APPDIRパラメータ）のすべてのアプリのフォルダをコピーして、出力フォルダ内にあるファイルへのすべての最適化を適用するファイルを指示RequireJS。次のコマンドを実行して、アプリフォルダーにプロファイルを作成します-
node r.js -o build.jsRequireJSは、jQueryを別の依存関係として使用し、名前付きモジュールjqueryとして小文字で登録します。デフォルトでは、AMD / RequireJSの使用中にグローバル関数$およびjQueryを使用して自身を登録します。
jQueryを読み込んでいます
require(['jquery'], function($) {
//code here
}以下に示すように、jQueryとともに複数のカスタムライブラリをロードできます-
require(['custom_library_path','jquery'], function(load_library,$) {
//related code of $ and load_library
});次の表は、依存関係を指定するためのRequireJSでのjQueryの使用を示しています。
| シニア番号 | タイプと説明 |
|---|---|
| 1 | ShimConfigの使用
jQueryは、shim構成を使用して、jQueryプラグインの依存関係を定義します。 |
| 2 | CDNからjQueryを読み込んでいます
jQueryはCDNを使用して、jQueryプラグインの依存関係を定義します。 |
Nodeアダプターは、RequireおよびNodeの検索パスの実装とともに使用できます。RequireJSで使用されるモジュール構成がない場合は、既存のノードベースのモジュールを変更せずに使用できます。npmコマンドを使用して、プロジェクトのnode_modulesディレクトリにノードパッケージをインストールできます。
ノードはローカルディスクからのみモジュールをロードし、マップ、パッケージ、パスなどの構成オプションは、モジュールがRequireJSによってロードされた場合にのみ適用されます。
ノードのインストール
次のコマンドを使用してノードアダプタをインストールできます。これにより、最新のリリースファイルがインストールされます-
npm install requirejs次の方法でもノードをインストールできます-
このリンクからr.jsをダウンロードして、プロジェクトフォルダーに保存できます。
r.jsリポジトリからソースを取得するか、ノードdist.jsからインストールします。
ノードの使用法
ノードを使用するには、require（ 'requirejs'）が必要であり、構成内のrequire関数を最上位のmain.jsファイルに移動する必要があります。
たとえば-
var requirejs = require('requirejs');
requirejs.config({
//load the mode modules to top level JS file
//by passing the top level main.js require function to requirejs
nodeRequire: require
});
requirejs(['name1', 'name2'],
function (name1, name2) {
//by using requirejs config, name1 and name2 are loaded
//node's require loads the module, if they did not find these
}
);AMDまたはRequireJSを使用したノードモジュールの構築
ライブラリのユーザーを必要とせずに、コードモジュールをRequireJSおよびNodeで動作させ、amdefineパッケージを使用してこの作業を実行できます。
たとえば-
if (typeof define !== 'function') {
var define = require('amdefine')(module);
}
define(function(require) {
var myval = require('dependency');
//The returned value from the function can be used
//as module which is visible to Node.
return function () {};
});ノードモジュールとしてのオプティマイザ
ノードモジュールは、コマンドラインツールを使用する代わりに関数呼び出しを使用することにより、最適化メソッドとしてRequireJSオプティマイザーを使用します。
たとえば-
var requirejs = require('requirejs');
var config = {
baseUrl: '../directory/scripts',
name: 'main',
out: '../build/main-built.js'
};
requirejs.optimize(config, function (buildResponse) {
//The text output of the modules specify by using buildResponse
//and loads the built file for the contents
//get the optimized file contents by using config.out
var contents = fs.readFileSync(config.out, 'utf8');
}, function(err) {
//code for optimization err callback
});Dojoは、AMDモジュールアーキテクチャに基づくJavaScriptツールキットであり、Webアプリケーションに機能を追加するための追加モジュールを提供し、Webアプリケーション開発プロセスの時間と規模を節約します。
例
次の例は、RequireJSとともにDojoを使用する方法を示しています。index.htmlという名前のhtmlファイルを作成し、その中に次のコードを配置します-
<!DOCTYPE html>
<html>
<head>
<title>RequireJS Dojo</title>
<script data-main="app" src="lib/require.js"></script>
</head>
<body>
<h2>RequireJS Dojo</h2>
<p>
Hello... ...
</p>
</body>
</html>作成する jsapp.jsという名前のファイルに次のコードを追加します-
require ({
//You can configure loading modules from the lib directory
baseUrl: 'lib',
paths: {
//mapping of package
dojo: 'http://sfoster.dojotoolkit.org/dojobox/1.7-branch/dojo'
}
}, [
//modules which we are using here
'dojo/dom'
], function(dom) {
//using the 'byId' method from dom module
var mydojo = dom.byId('dojo_val')
mydojo.innerHTML = "The text is displaying via dojo/dom";
}
);出力
HTMLファイルをブラウザで開きます。次の出力が表示されます-
モジュール形式はCommonJSによって定義されます。これは、他のJavaScript環境と同等のブラウザーオプションを提供せずに定義されています。したがって、CommonJS仕様では、トランスポート形式と非同期のrequireを推奨しています。従来のCommonJSモジュール形式をRequireJSで動作するように簡単に変換できます。ただし、すべてのモジュールが新しい形式に変換されるわけではありません。いくつかの例外を以下に示します-
- require呼び出しを行うための条件付きコードを持つモジュール。
- 循環依存のあるモジュール。
手動変換
CommonJSモジュールは、次の構文を使用して手動でRequireJS形式に変換できます-
define(function(require, exports, module) {
//place CommonJS module content here
});変換ツール
CommonJSモジュールは、r.jsファイルに組み込まれているr.jsプロジェクトコンバーターツールを使用して、RequireJS形式に変換できます。以下に示すように、変換するファイルのパスと出力フォルダを指定する必要があります-
node r.js -convert path/to/commonjs/modules/ path/to/outputエクスポート値の設定
CommonJSの一部のシステムでは、エクスポートされた値をmodule.exportsとして割り当てることで、エクスポートされた値を設定できます。ただし、RequireJSは、defineに渡された関数から値を返す簡単な方法をサポートしています。これの利点は、エクスポートとモジュール関数の引数が必要ないため、以下に示すように、モジュール定義からそれらを除外できることです。
define(function (require) {
var name = require('name');
//Define the module as exporting a function
return function () {
name.doSomething();
};
});代替構文
依存関係を指定する別の方法は、依存関係配列引数define（）を使用することです。ただし、依存関係配列内の名前の順序は、以下に示すように、定義関数define（）に渡される引数の順序と一致する必要があります。
define(['name'], function (name) {
return function () {
name.doSomething();
};
});CommonJSパッケージからのモジュールのロード
場所とパッケージ属性について知るために、モジュールはRequireJS構成をセットアップすることにより、RequireJSを使用してCommonJSパッケージにロードされます。
最適化ツール
最適化ツールはRequireJSにあり、モジュール定義を組み合わせて、ブラウザー配信用に最適化されたバンドルにすることができます。これはコマンドラインツールとして動作するため、コード展開の一部として使用できます。
RequireJSには、さまざまなタイプのリソースを依存関係としてロードできるプラグインの小さなセットが含まれています。以下は、RequireJSで利用可能なプラグインのリストです-
- text
- domReady
- i18n
- CSSの読み込み
テキスト
テキストプラグインは、主にJavaScriptファイル内のHTMLコンテンツを挿入するために使用される非同期ロードのテキストベースのリソースのために使用されています。テキストを使用するとロードできます！requireまたはdefineモジュール呼び出しのプレフィックスを付け、ファイル拡張子をプラグインに渡します。通常のモジュールロードと比較して、テキストプラグインはXHRを使用してモジュールをロードし、ヘッダーにコードを追加しません。script 鬼ごっこ。
テキストファイルリソースは、依存関係としてコードに-として含めることができます。
require(["mymodule", "text!mymodule.html", "text!mymodule.css"],
function(mymodule, html, css) {
//the html and css variables will be the text
//of the mymodule.html file and mymodule.css files respectively
}
);domReady
RequireJSは、スクリプトが完全にロードされた場合にのみ、DOMの準備が整う前にスクリプトをロードするために使用でき、開発者はDOMと対話できます。DOMの準備が整う前にスクリプトをロードできる場合があります。したがって、この問題を克服するために、RequireJSは、DOMの準備ができたらdomReady関数を呼び出すDOMContentLoadedイベントと呼ばれる最新のアプローチを提供します。
require(['domReady'], function(domReady) {
domReady(function() {
//the domReady function is called when DOM is ready
//which is safe to manipulate DOM nodes in this function
});
});i18n
を提供する複数のロケールで使用できます i18nモジュールまたは依存関係で「i18n！」が指定されたときに自動的にロードされるバンドルサポート。プレフィックス。これを利用するには、ダウンロードして、メインのJavaScriptファイルが存在するのと同じディレクトリに配置します。このプラグインを「nls」というディレクトリに配置して、ローカリゼーションファイルを見つけます。
例えば、我々は1つのjsファイルと呼ばれていることを前提とcountry.jsなどのディレクトリに以下の内容と場所、それを持つmydirectoryなど/ NLS / country.jsを-
define({
"root": {
"india": "india",
"australia": "australia",
"england": "england"
}
});fr-frロケールを使用してファイルに特定の翻訳を追加すると、上記のコードは次のように変更されます。
define({
"root": {
"title": "title",
"header": "header",
"description": "description"
},
"es-es": true
});次に、mydirectory / nls / es-es /country.jsにあるファイルを次の内容で指定します-
define({
"root": {
"title": "título",
"header": "cabecera",
"description": "descripción"
},
"es-es": true
});以下に示すように、main.jsファイルのモジュール構成を使用してプラグインにロケールを渡すことでロケールを設定できます-
requirejs.config({
config: {
//set the config for the i18n plugin
i18n: {
locale: 'es-es'
}
}
});RequireJSを使用したCSSの読み込み
一部のプラグインを使用して、ヘッダーリンクに追加するだけでCSSファイルをロードできます。
CSSは、以下に示すように独自の関数を使用してロードできます。
function myCss(url) {
var mylink = document.createElement("mylink");
mylink.type = "text/css";
mylink.rel = "stylesheet";
mylink.href = url;
document.getElementsByTagName("head")[0].appendChild(mylink);
}