RequireJS加載js文件

原創

2020-02-21 20:36

RequireJS的目標是鼓勵代碼的模塊化，它使用了不同於傳統

//This sets the baseUrl to the "scripts" directory, and loads a script that will have a module ID of 'main'
<script data-main="scripts/main.js" src="scripts/require.js"></script>

baseUrl亦可通過RequireJS config手動設置。如果沒有顯示指定config及data-main，則默認的baseUrl爲包含RequireJS的那個HTML頁面的所屬目錄。
RequireJS默認嘉定所有的依賴資源都是js腳本，因此無需再module ID上再加”.js”後綴，RequireJS在進行moduleID到path的解析時會自動不上後綴。你可以通過paths config設置一組腳本，這些有助於我們在使用腳本時碼更少的字。
有時候你想避開“baseUrl+paths”的解析過程，而是直接指定加載某一個目錄下的腳本。此時可以這樣做：如果一個module ID符合下述規則之一，其ID解析會避開常規的“baseUrl+paths”配置，而是直接將其加載爲一個相對於當前HTML文檔的腳本：

以“.js”結束。
以“/”開始。
包含URL協議，如“http:”or“https:”。
一般來說，最好還是使用baseUrl及“paths”去設置moduleID。它會給你帶來額外的靈活性，如便於腳本的重命名、重定位等。同時，爲了避免凌亂的配置，最好不要使用多級嵌套的目錄層次來組織代碼，而是要麼將所有的腳本都放置到baseUrl中個，要麼分置爲項目庫/第三方庫的一個扁平結構。
www/
- index.html
- js/
  - app/
    - sub.js
  - lib/
    - jquery.js
    - canvas.js
  - app.js
index.html

<script data-main="js/app.js" src="js/require.js"></script>

app.js

requirejs.config({
  //By default load any module IDs from js/lib
  baseUrl: 'js/lib',
  //except, if the module ID starts with "app",
  //load it from js/app directory. paths
  //config is relative to the baseUrl, and 
  //never includes a ".js" extension since
  //the paths config could be for a directory
  paths: {
    app: '../app'
  }
});

//Start the main app logic.
requirejs(['jquery', 'canvas', 'app/sub'], function($, canvas, sub){
  //jQuery, canvas and the app/sub module are all
  //loaded and can be userd here now.
}

理想情況下，每個加載的腳本都是通過define()來定義的一個模塊；但有些“瀏覽器全局變量注入”型的傳統/遺留庫並沒有使用define()來定義他們的依賴關係，你必須爲此使用shim config來指明它們的依賴關係。如果你沒有指明依賴關係，加載可能報錯。這是因爲基於速度的原因，RequireJS會異步地以無序的形式加載這些庫。

注意
1、data-main指定的js文件也會被當做一個module，命名爲其js文件名稱。
2、在require config中paths不僅可以配置一個js文件的module ID，還可以配置一個文件夾的module ID，那麼這個文件夾下所有的js文件都可以用這個文件夾的moduleID/js文件名錶示。