前回記事からの続きです。
RequireJSでは定義したjsファイルを読み込む時に、相対パス指定を省略できるようにconfigを設定することができます。
htmlからrequireJSを読み込んだ際に、configの設定方法について違いが二つあります。
目次
前提
前回と同じHelloWorld.jsのソースを用います。
今回はHelloWorld.jsとutil.jsに差分はありません。
HelloWorld.js
require(['util'], function(util) { var result = util.add(10, 21); console.log('10 + 21 = ' + result); });
util.js
define(function() { return { add: function(a, b) { return a + b; } } })
requireJSを読み込んだ後にconfigを設定する
多分こっちのほうが王道。
requireJSを読み込み、require.configで設定する。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script> <script src="./js/config/config.js"></script> <script src="./js/HelloWorld.js"></script> <h1>Hello World!</h1> </body> </html>
config.js
require.config({ baseUrl: "js", paths: { "util": "lib/util" } });
requireJSを読み込むより前にconfigを設定する
たまに見かける。
先にrequireフィールドを定義することでconfig情報を設定しておき、後からrequireJSを読み込む方法
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="./js/config/config.js"></script> <script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script> <script src="./js/HelloWorld.js"></script> <h1>Hello World!</h1> </body> </html>
config.js
var require = { baseUrl: "js", paths: { "util": "lib/util" } };
まとめ
ちなみにこの場合、index.htmlから見て
./js/lib/util配下にutil.jsがあることになります。
それをHelloWorld.jsではrequireにutilを宣言するだけでutil.jsを呼び出すことができます。
コメントを書く