require.js的路徑問題

在requirejs的demo練習中對其中的路徑進行設置時跳了不少坑，下面就來一一說明，本人親測有效

demo目錄結構以下

 

 其中a依賴於b，main做爲加載的入口文件

在不設置baseUel的狀況下

1.1.當requirejs只是被包含在html頁面中，且沒用增長data-main設置

index頁面

 

 此時，js文件加載根路徑以index.html頁面的加載路徑爲基準，在main.js中

 

 結果

 

 修改main.js

 

 或

 

 注意：以「/」開頭時要加上.js後綴

1.2.當增長data-main這隻項時

在index頁面中

 

 

此時main.js文件以異步方式加載，在requirejs加載完成後才加載，Js文件加載的路徑是以data-main設置的路徑爲基準

修改main.js文件

 

 結果

 

 修改main.js文件

 

 在設置baseUrl的狀況下

2.1．在baseUrl爲「/」時

此時，ja文件上的加載路徑以根路徑爲基準，修改main.js

 

 結果：

 

 修改main.js

 

 2.2.在baseUrl不爲「/」時

此時，js文件加載的根路徑以index頁面的加載路徑爲基準

1.修改main.js

 

 結果：

 

 再次修改：經過

 

2.修改main.js

 

 結果：

 

 修改main.js

 

 

以上狀況都是針對啓動頁面index.html與入口js文件main.js之間的路徑設置關係，下面就來講明具備依賴關係的js文件之間的路徑設置。在前面的目錄結構截圖中，a.js依賴於b.js，在a.js中依賴b.js時，能夠以a.js文件爲基準來寫b.js的路徑，以下

 

也能夠之前面說到的狀況的路徑基準來寫b.js的路徑

 

 

 

 

 

注意：baseUrl設置爲「/」慎用

由於在實際開發中,通常都採用先後端分離的方式，在部署代碼的時候，存放前端代碼的文件夾不必定是存放在根目錄下，對於這一點的對比能夠在webstrom和vscode中運行代碼的異同點中清晰體會。

本次的demo測試的代碼我放在require文件下，如下是在瀏覽器中打開的狀況

 

Webstrom：

 

 

Vscode：

能夠看出，一樣的代碼以不一樣的工具打開運行的結果卻不一樣，也能夠明顯看出，在webstrom中路徑是加上了require的，因此在設置baseUrl爲「/」時，是以路徑中第一個「/」爲基準來加載的，因此再在webstrom中修改main.js

 

 

 require模塊加載的幾種狀況：