文件路径拼写说明

[chenxiaochun]

jdfx对文件路径的拼写方式进行了一些调整，这里对各种情况进行一下说明。假设你的config.json中有如下配置：

{
    "projectPath": "jdf-test"
}

项目的目录结构如下所示：

jdf-test
├── config.json
├── html
     └── index.html
├── js
     └── a.js
     └── b.js
├── css
     └── style.css
     └──  i
          └── icon.png

1、相对路径

现在引用文件的时候你可以使用类似./，../，../../的相对路径表示方式，例如：

• 在html/index.html中引用了一个js文件：

<script src="../js/a.js"></script>

那么它就会被编译成：

<script src="//misc.360buyimg.com/jdf-test/js/a.js"></script>

2、以/开头的绝对路径

以/开头的路径，会被认为是相对于项目根目录的绝对路径。例如还是上面html文件引用js的例子，我还可以写成：

<script src="/js/a.js"></script>

编译之后的结果还是：

<script src="//misc.360buyimg.com/jdf-test/js/a.js"></script>

3、使用require加载文件

用require加载文件，并且文件路径以字母开头的，会被直接添加上cdn然后返回，其它情况还是会以相对路径处理。例如：

require("jdf/2.0.0/ui/dialog/1.0.0/dialog");
require("a.js");

然后它们会被编译成：

require("misc.360buyimg.com/jdf/2.0.0/ui/dialog/1.0.0/dialog");
require("misc.360buyimg.com/a.js");

相要引用当前目录的文件，必须加上./，例如：

require("./a.js");

4、使用seajs.use加载文件

用 seajs.use加载文件，文件路径以字母开头的，会被直接添加cdn然后返回，其它情况还是会以相对路径处理。例如：

seajs.use(["jdf/2.0.0/ui/dialog/1.0.0/dialog"]);

然后会被编译为：

seajs.use(["misc.360buyimg.com/jdf/2.0.0/ui/dialog/1.0.0/dialog"])

5、以http://、https://和//开头的绝对路径地址

针对此类绝对路径，jdfx不做任何处理。

[jiadi0801]

路径说明

路径分为四类：

• CDN全路径
• 绝对路径
• 相对路径
• 线上组件路径（特殊）

CDN全路径

包括http://, https://, //这种url

require("http://misc.360buyimg.com/jdf/2.0.0/ui/dialog/1.0.0/dialog");
require("https://misc.360buyimg.com/jdf/2.0.0/ui/dialog/1.0.0/dialog");
require("//misc.360buyimg.com/jdf/2.0.0/ui/dialog/1.0.0/dialog");

这种全路径url是不会做任何改动直接输出的。

绝对路径

以/打头的路径均为绝对路径，在jdf中，绝对路径的根目录为项目根目录，也就是config.json所在目录

比如cdn指定为"cdn": "//misc.360buyimg.com"，工程输出目录"projectPath": "JDC_vituals_train/1.0.0"

require("/widget/nav/nav.js");
require("/jdf/2.0.0/ui/dialog/1.0.0/dialog"); // 错误引用，应该采用线上组件路径

将输出：

require("//misc.360buyimg.com/JDC_vituals_train/1.0.0/widget/nav/nav.js");
require("//misc.360buyimg.com/JDC_vituals_train/1.0.0/jdf/2.0.0/ui/dialog/1.0.0/dialog");

相对路径

以.打头的路径均为相对路径

比如cdn指定为"cdn": "//misc.360buyimg.com"，工程输出目录"projectPath": "JDC_vituals_train/1.0.0"

require("../nav/nav.js");  // 当前目录为 /widget/header/header.js
require("./common.js");  // 当前目录为  /js/index.js

将输出：

require("//misc.360buyimg.com/JDC_vituals_train/1.0.0/widget/nav/nav.js");
require("//misc.360buyimg.com/JDC_vituals_train/1.0.0/js/common.js");

线上组件路径（特殊）

这部分是容易令人困惑的，如果调用jdfui或者popui组件，那么这部分就是需要查看的。 对于jdfui和popui，写全路径是麻烦的，因此采取了折中办法，将cdn域名//misc.360buyimg.com去掉，只保留后面的路径，因此得到/jdf/2.0.0/ui/dialog/1.0.0/dialog，但是第一个/和绝对路径冲突，因此删除这个/，得到jdf/2.0.0/ui/dialog/1.0.0/dialog，这个路径就是线上组件路径的简写。

对于这类简写，编译时将直接和cdn连接，得到

//misc.360buyimg.com/jdf/2.0.0/ui/dialog/1.0.0/dialog