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