前回記事からの続きです。
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を呼び出すことができます。
