search

fex-team / jello

Front End Integrated Solution for J2EE Velocity.
206 stars 49 forks source link

jello 无法打包 .vm 文件的依赖 #53

Open ystarlongzi opened 9 years ago

ystarlongzi commented 9 years ago

假设目录规范如下：

-- page
    -- index
        -- index.vm

-- static
    -- css
        -- css1.css
        -- css2.css
        -- css3.css

-- fis-conf.js

fis-conf.js文件内容如下：

fis.config.set('modules.packager', 'depscombine');
fis.config.merge({
    pack: {
        /*
        注释：
        1. 查看链接处的注释 https://github.com/2betop/jello-demo/blob/master/fis-conf.js#L38
        2. 依据上面的注释，这里应该会把 index.vm 文件的依赖打包吧？
        */
        'pkg/aio.css': ['page/index/index.vm']
    }
});

page/index/index.vm文件内容如下：

<!DOCTYPE html>
#html()
    #head()
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>$title</title>

        <!--
        注释：
        根据打包规则的配置，这几个css文件应该会被打包成一个文件吧？
        -->
        #require('/static/css/css1.css')
        #require('/static/css/css2.css')
        #require('/static/css/css3.css')
    #end

    #body("class", "$bodyClass")
        <!--添加livereload注释-->
        <!--livereload-->
    #end

    #require('./index.vm')
#end

jello release -p 后，/WEB-INF/config/map.json 内容如下：

{
    "res": {
        "page/index/index.vm": {
            "uri": "/page/index/index.vm",
            "type": "vm",
            "extras": {
                "isPage": true
            }
        },
        "static/css/css1.css": {
            "uri": "/static/css/css1.css",
            "type": "css"
        },
        "static/css/css2.css": {
            "uri": "/static/css/css2.css",
            "type": "css"
        },
        "static/css/css3.css": {
            "uri": "/static/css/css3.css",
            "type": "css"
        }
    },
    "pkg": {}
}

其中 pkg 字段为空对象，并没有把page/index/index.vm里依赖的文件给打包

2betop commented 9 years ago

require 是运行时 依赖，所以不在 map.json 里面标记上。map.json 里面标记的是静态依赖。比如 fis 的 注释标记依赖。或者 js 中的 require(xxx) 语句。

这个 index.vm 里面都是走的 #require 所以没有依赖信息。

2betop commented 9 years ago

你试试

<!--
@require '/static/css/css1.css'
@require '/static/css/css2.css'
@require '/static/css/css3.css'
-->
ystarlongzi commented 9 years ago

@2betop 恩，可以的。谢谢！

ystarlongzi commented 9 years ago

@2betop 我还有一个疑问，比如现在又多了如下目录：

-- widget
    -- header
        -- index.vm
        -- index.js
        -- index.css

然后widget/header/index.vm里的内容如下：

<!--
    @require 'index.less'
-->

<div class="header">header</div>

修改page/index/index.vm内容如下：

.......

<!--
    注释：
    记引入 widget/header/index.vm 插件，这个插件这里的 css 不会被打包进去嘛？
-->
#widget('widget/header/index.vm')
.......
2betop commented 9 years ago

widget() 也是运行时加依赖，静态分析时根本就不会处理它。这块你可以加入

<!--
@require 'widget/header/index.vm'
-->

不过我不建议你这么去用，为何不在 pack 里面去配置详细的打包列表，而要借助这种静态的依赖方式去粗鲁的打包？

ystarlongzi commented 9 years ago

@2betop 嗯嗯，谢谢！ 我是这么理解的，比如page/index/index.vm，引入了几个 widget，部分代码如下：

........
#widget('widget/a/index.vm')
#widget('widget/b/index.vm')
#widget('widget/c/index.vm')
#widget('widget/d/index.vm')
#widget('widget/e/index.vm')
........

考虑这样的场景：

  1. 某一天，又引入了几个 widget
  2. 某一天，某个 widget，又依赖了其它资源或者移除了之前依赖的资源

那么通过哪种方法就可以不用再修改配置文件，jello 会给自动打包嘛。我是这样想的。。

2betop commented 9 years ago

我觉得你不能依靠页面的静态分析依赖来自动打包，要从全站角度去分析，哪些资源应该合并在一起，然配置详细的 pkg 列表。

fis.config.set(pack', {
  'pkg/common.js': [
      'static/1.js',
       'static/2.js',
       'static/3.js',
  ]
})

depsCombine 这个插件只是把分析到的静态资源合并加入进来，还是节省一些麻烦。

推荐看看这块关于打包的说明。

https://github.com/fex-team/fis/issues/488#issuecomment-101989042

ystarlongzi commented 9 years ago

@2betop 恩，谢谢。。想明白了些。