require.config()用法

antzone發表於2017-07-14
UI

在require.js data-main主模組使用一章節介紹了模組載入的基本使用。

引數都是採用的預設配置，例如:

[HTML] 純文字檢視 複製程式碼
<script src="js/require.js" data-main="js/main"></script>

main.js的程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
  // 程式碼
});

預設情況下，require.js假定這三個模組與main.js在同一個目錄，檔名分別為jquery.js，underscore.js和backbone.js，然後自動載入。我們也可以使用require.config()方法進行配置，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
require.config({
  paths: {
　  "jquery": "lib/jquery.min",
　　"underscore": "lib/underscore.min",
　　"backbone": "lib/backbone.min"
　}
});

這段配置程式碼要放在main.js檔案的頂端；上面的程式碼指定了模組檔案的具體路徑，並重新命名了模組名稱（可以將原本很複雜的模組名稱重定義為更為簡潔的形式）。

可以使用baseUrl屬性可以設定基目錄，它的作用類似於HTML中的<base>標籤，參閱HTML <head>標籤一章節。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
require.config({
  baseUrl: "js/lib",  
  paths: {
　  "jquery": "jquery.min",
　　"underscore": "underscore.min",
　　"backbone": "backbone.min"
　}
});

規定基準目錄之後，具體問檔案路徑就可以使用簡寫的形式。

特別說明:baseUrl規定的路徑參照於引入main.js頁面的相對路徑，因為此時mian.js檔案已經匯入到此頁面。

避免baseUrl生效的方式:

（1）.以 ".js" 結束。

（2）.以 "/" 開始。

（3）.包含 URL 協議, 如 "http:" or "https:"。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
require.config({
  baseUrl: "js/lib",  
  paths: {
　  "jquery": "jquery.min.js",
　　"underscore": "underscore.min",
　　"backbone": "backbone.min"
　}
});

這時候就會在main.js的同級目錄下查詢jquery.min.js。

相關文章