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模块加载的几种状况：