fex-team / fis3

FIS3
http://fis.baidu.com
BSD 2-Clause "Simplified" License
2.79k stars 694 forks source link

FIS3 不支持绝对路径匹配 #857

Open jackiealex opened 8 years ago

jackiealex commented 8 years ago

建立目录

    -test-fis
        -static
            -js
                +a.js
                +b.js
                +c.js
    -fis-conf.js

fis-conf.js 内容如下

fis.set('project.files', ['test-fis/**']);

fis.match('static/**.js', {
    useHash: true, // 开启 md5 戳
    release: '$0',
    url: '$1'
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fis test</title>
    <link rel="stylesheet" href="static/css/a.css">
    <script src="/static/js/a.js"></script>
    <script src="static/js/a.js"></script>
    <script src="static/js/c.js"></script>
</head>
<body>
</body>
</html>

运行 fis3 release -d output

输出结果如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fis test</title>
    <link rel="stylesheet" href="/test-fis/static/css/a.css">
    <script src="/static/js/a.js"></script>
    <script src="/test-fis/static/js/a_200b75e.js"></script>
    <script src="/test-fis/static/js/c_24c6aa7.js"></script>
</head>
<body>
    <img src="/static/img/a.jpg" alt="">
    <img src="/static/img/a.jpg" alt="">
</body>
</html>

也就是说,/static/js/a.js 根本没有背匹配到

jackiealex commented 8 years ago

两个a文件,一个是 '/static/js/a.js', 'static/js/a.js' 结果只匹配到了 'static/js/a.js' 悲催啊???

oxUnd commented 8 years ago

你的 test-fis 目录呢,fis-conf 是放在 test-fis 下呢还是和它同级?

jackiealex commented 8 years ago

是同级别的,平行的

jackiealex commented 8 years ago

就是我考虑到fis 支持project.files 匹配处理的工程目录,所以fis-conf.js 是可以放在上边的,然后问题是,怎么干掉类似test-fis这种顶级前缀目录,我希望使用的时候使用 /static/js/a_dfja3489.js 而不是 test-fis/static/js/a_dfja3489.js 。此处我关注的主要是第二个问题,就是我开发的时候习惯使用虚拟目录(比如nodejs 指定的/static/)而非相对目录(./static)请问,fis3 如何修改html 中的这种虚拟(绝对路径的)目录

2betop commented 8 years ago

通过修改 release, 理论上能满足你各种部署路径的需求。

fis.match('/test-fis/(**)', {
  release: '/$1'
})
jackiealex commented 8 years ago

fis3 应该不能硬性要求用户使用某种目录结构,fis3缺少对虚拟目录的匹配,所谓虚拟目录,就是某种资源定位问题——比如,html中的某个虚拟目录的js,应该对应着项目的哪个js,其实只需要添加的能力是,虚拟目录的/static 其实对应着 ./static 而fis3偏偏看不见这种规则,因为它认为是决绝路径

2betop commented 8 years ago

不能够理解你说的虚拟目录,是相对路径吗?

2betop commented 8 years ago

/static/js/a.js 的绝对路径是从从项目跟目录出发的,一般都是 fis-conf.js 所在位置。如果你写成 /test-fis/static/js/a.js 就能找到。

或者,你可以把项目目录直接设置到 test-fis 这层,这样 /static/js/a.js 也能找到。 用命令(假设你当前命令行所在位置 test-fis 所在目录) fis3 release -r test-fis -f ./fis-conf.js

jackiealex commented 8 years ago

请问fis 的同学一个问题,html 中的js/css/img等静态资源路径,fis3是否要求和目录结构保持一致,如果是的话,fis3做资源定位就不够nice了,test-fis 下的/staitc/js/a.js 是通过别的(node server)映射的,我让所有/static 开头的静态资源都去 ./static 目录下查找,我认为fis3 具备的这种能力,该怎么配置?

jackiealex commented 8 years ago

问题是这样的,我的静态资源服务器使用node 搭建的,而我只想用fis做 一些简单的编译,但是发现我这种,写的/static/js/a.js 全都匹配不到,只能写相对目录,但实际上,我根本不可能写成相对目录来进行开发,大多数开发者也可能是用别的服务搭建的静态服务,导致静态资源路径和原来的目录结构形成一一影射因而并不是相对路径(虚拟目录)

jackiealex commented 8 years ago

express 有个静态中间件 这么用的 //当html静态资源这么写的时候

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

对应

express.use('/static', express.static('./static'))

有时候用户在html中这么写

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

express 中就这么映射(写)

express.use('/st', express.static('./static'))

这样就很明白了,/st和/static 并不是真实存在的目录,是虚拟的, 而./static 才是真正存在的

jackiealex commented 8 years ago

@2betop @xiangshouding

2betop commented 8 years ago

你完全可以开发的时候写 <script src="/static/js/a.js"></script>

如果你要部署到你刚描述的这种应用里面。加个配置

fis.match('/static/(**)', {
  release: '/st/$1'
})

然后产出后,路径自动就变成了 <script src="/st/js/a.js"></script>

以后你要部署到其他应用里面,这回不是 /st/xxx 而是 /some/other/path/xxx 你要适配的时候,源代码一行都不要改,只需要把 fis-conf 那个配置改一下就行了。

fis.match('/static/(**)', {
  release: '/some/other/path/$1'
})

fis 推崇的是源码开发时忽略之后的部署问题的。所有资源都用相对路径,或者基于项目的绝对路径来引用,然后通过配置可以适用于任何后端部署。