fis-chassis

    0.0.8 • Public • Published

    FIS-Chassis

    NPM version

    FIS-Chassis提供Chassis框架自动化脚手架开发的能力,为webapp提供开发上的便利。

    快速上手

    • 安装

      • npm install -g fis-chassis
    • 三条命令,满足你的所有开发需求

      • fis-chassis install <name>
      • fis-chassis release [options]
      • fis-chassis server <command> [options]

      fis-chassis可以简化为fisc

    示例演示

    示例安装

    fis-chassis install demo --repos http://webappdemos.duapp.com/scaffold
    

    示例预览

    开启本地预览服务:

    fis-chassis server start --no-rewrite
    

    发布到预览环境:

    fis-chassis release
    

    重新刷新浏览器即可看到效果。

    编译开发

    初始化脚手架

    如示例安装一样,你不需要从0开始创建一个webapp,工具已经提供了一个脚手架帮你做好了准备工作。

    使用fis-chassis install命令安装脚手架:

    fis-chassis install init --repos http://webappdemos.duapp.com/scaffold
    

    如果某个目录为空,使用fis-chassis release命令时也可以自动下载脚手架:

    md webapp
    cd webapp
    fis-chassis release
    
    ... ...
    找不到fis-conf.js文件,当前项目不是chassis项目,需要安装chassis脚手架吗?
    [N/Y]? y
    
    选择脚手架名称:
    1. init(最简单的脚手架,适合创建自己的项目)
    2. demo(一个新闻app的完整示例)
    
    【请选择】 : 2
    
    ... ...
    
    脚手架安装成功,请重新执行release命令;
    
    fis-chassis release
    
    

    目录结构介绍

    .
    │  fis-conf.js  //fis配置文件
    │  index.html  //项目首页,可以自己指定其它名称
    │  
    ├─css
    │   all.css
    │   app.css
    │   globalloading.css
    │   pageloading.css
    │   reset.css
    │      
    ├─data    //模拟数据目录
    ├─img  
    ├─js
    │  │  chassis.config.js //[todo]待优化掉
    │  │  init.js
    │  │  pageview._TRANSITION_.js
    │  │  
    │  └─common
    │      │ mod.js
    │      ├─baidutemplate 
    │      ├─chassis  
    │      └─gmu
    │                      
    ├─page
    │  ├─detail
    │  │  ├─css
    │  │  │   detail.css
    │  │  │      
    │  │  ├─html
    │  │  │   detail.html
    │  │  │      
    │  │  ├─js
    │  │  │  └─view
    │  │  │     pageview.detail.js
    │  │  │     subview.detail_content.js
    │  │  │          
    │  │  └─tpl
    │  │     detail.tpl
    │  │          
    │  └─index
    │              
    └─tpl
        globalloading.html
        pageloading.html
            
    

    新增Page

    假如我们要新增一个Page,对应的路由规则是:

    { "view" : "view" }
    

    编辑配置文件fis-conf.js,在Chassis.router.routes下新增一条规则即可,如下:

    fis.config.merge({
        chassis : {
            home   : 'index.html',
            router : {
                "routes" : {
                    ""       : "index",
                    "detail" : "detail",
                    "view"   : "view"  //新增的路由规则
                },
                
                "defaultPageTransition" : "simple",
                
                "enablePositionRestore" : true,
                
                "pageTransition" : {
                    "index-detail" : "slide"
                }
            }
        }
    });
    

    保存。

    重新编译

    刚才新增的规则并没有建立对应的page/view目录,我们不需要手动建立它,使用fis-chassis release命令时会自动检测到这个新增的规则并处理它:

    fis-chassis release
    
    ... ....
    
    配置文件新增了一些路由规则,对应的目录及文件没有创建,需要创建吗?
    [N/Y]? y
    
    目录及文件创建成功,请重新执行release命令!
    
    ... ...
    fis-chassis release
    

    此时,即可预览到新增的page,而且,开发目录下已经自动生成了page/view目录及对应的脚手架模板,根据需要修改自己的业务逻辑即可。

    预览

    fis-chassis release
    

    新增标签介绍

    为了简化开发过程中的手工操作,工具在FIS的基础上新增了几个标签

    {{page.html}}

    试用范围:任意html/css/js文件

    工具在打包前会根据fis-conf.js设置的路由规则提取需要的page目录下的html文件内容替换掉当前标签。

    {{page.css}}

    试用范围:任意html/css/js文件

    工具在打包前会根据fis-conf.js设置的路由规则提取需要的page目录下的css文件内容替换掉当前标签。

    {{map.json}}

    试用范围:任意html/css/js文件

    工具在打包前会将map.json文件的内容替换当前标签。

    {{setting.router}}

    试用范围:任意html/css/js文件

    工具在打包前会将fis-conf.jschassis.router节点的配置信息替换当前标签。

    关于前端模板

    如果你在项目中使用了前端模板,一般需要选择一款合适的前端模板引擎。为了提高移动端前端模板解析的速度,工具提供模板预编译的功能,用于将前端模板编译为JS代码,同时配合mod.js提供的模块化能力,使得模板文件可以像js一样直接引用。

    所以只需要根据baiduTemplate的模板语法直接创建模板文件即可。

    其它

    fis-chassis仅在fis-conf.jsChassis.router.routes规则新增时对开发目录下的page目录做新增操作。如果你删除了某些规则,工具不会删除对应的目录,但这个目录会变成孤立的目录,业务运行时不会被调用。

    Keywords

    none

    Install

    npm i fis-chassis

    DownloadsWeekly Downloads

    0

    Version

    0.0.8

    License

    MIT

    Last publish

    Collaborators

    • bility