dtjs

Dt.js 说明文档

团队原本使用 FIS3（百度FIS3的官方文档） 作为前端工程化的构建工具，它的确为我们解决了一些问题，但作为一个主要业务是给其它团队输出静态页面的前端组，FIS3 没在开发效率上给团队带来多大的提升，这时才想到自己写一款适合团队业务与开发方式的前端工程化构建工具，来解决团队现在开发方式的一些问题。

Dt.js 是基于 FIS3 开发的，所有的命令，操作，语法基本和是一致的，所以此处不会过多的介绍 api，只提及些关键的问题。

• 百度FIS3的官方文档
• Dt.js文档地址

安装

#安装 
npm install -g dtjs

如果有BUG，或者改进的地方，可以提交 ISSUES。

例子

• 这里有一个简单的例子，例子的 地址。进入项目根目录，执行命令，进行构建。

# 相当于 fis 的 release 命令 
dtjs output

• 如果需要使用组件功能，需要在 dtjs.config.js 中设置一下外网库的地址：

dtjs.set('widget.server', 'http://dtjsfm.duapp.com');

• 另外，可以运 dtjs widget -list 查看组件列表，或者直接访问外网库的地址

# 安装组件 
dtjs widget -install widget-name

Dt.js解决的问题

第一个问题：页面组件化开发

页面组件化开发，使得团队中开发的代码可以复用，积累，在一个主要业务是给其它团队输出静态页面的前端组中，这是亟待解决的问题。而 Dt.js 的解决方案主要是参考了京东的前端构建化工具 JDF（京东JDF的Github地址）的 widget 功能。

有关页面组件化开发的介绍，很多文章介绍，可以扩展阅读：

• 前端工程——基础篇
• JDF widget模块 -- 生态圈

1. 项目目录结构及引用

project
  - html 
  - js
  - css
  - widget
    - header   #可复用的header组件及代码
        - header.html
        - header.js
        - header.css

<!-- 引用相对的路径，如当前文件在 html 文件夹中 -->
<widget href="../widget/header/header.html" />

2. 发布到服务中

dtjs widget -publish header

3. 在新项目中复用（安装）

dtjs widget -install header

4. 可视化布局工具

关于可视化布局工具，可以看看Bootstrap的一款可视化布局工具：layoutit 地址。

暂时还没有实现该功能

第二个问题：定位资源

团队输出页面给其它组，不同的组因为开发语言的关系，文件需要放置的目录结构也是大不相同（拿基于express的nodejs web应用为例子，js, css, img文件会放到 public 里，模板文件放到 view 目录下），或者其它组同事要求的目录结构。所有需要定位资源来解决问题，让前端组不需要考虑其它组的目录结构，但又可以生成其它组需求的目录结构。

1. 如上面的项目需要部署成以下的目录结构为例

project
  - public
    - 项目名
      - 1.0.0    1.0.0版本的静态资源都构建到这里
      - 1.0.1    1.0.1版本的静态资源都构建到这里
      ...
  - views
    - 项目名
      - 1.0.0    1.0.0版本的后端模板都构建到这里
      - 1.0.1    1.0.1版本的后端模板都构建到这里
      ...

2. dtjs.config.js的配置

dtjs.match('**', {
    proj: 'dome'    //为文件设置对应的项目名
    version: '1.0.0'    //为文件版本信息
})
 
//匹配所有的静态文件
dtjs.match('**.{js,css,png,jpg,jpeg,gif}', {
    output: './output/public/${proj}/${version}/$0',
    url: '//cdn/${proj}/${version}/$0',
    useHash: true 
})
 
//匹配所有的模版文件
dtjs.match('**.{html,ejs}', {
    output: './output/views/${proj}/${version}/$0'
})

• output： 设置文件的产出路径。该值可以设置为 false ，表示为不产出（unreleasable）文件。
• url： 指定文件的资源定位路径，默认是以 / 开头的文件的路径。
• useHash： 设置文件是否携带 md5 戳。

3. 运行输出命令

dtjs output

• 目录对比、

• index.html文件对比

Dt.js 的资源定位实现是参考了 FIS3 的，用法和功能一样。 相关文章，拓展阅读：

• 前端开发体系建设日记
• 百度FIS3的官方文档--定位资源
• 百度FIS3的官方文档--配置glob

第三个问题：前后端开发分离

前后端开发分离包括前端在不需要搭建后端的 web 服务的情况下：

• 输出可用的模块文件（如 nodejs 的 web 应用，则需要输出 ejs 的模板文件）。
• 模拟 ajax 接口请求。

Dt.js 的输出可用的模块文件功能，是开发了一个 FIS3 的 parser，相关内容可参考下面链接的文章：

• fis3-parser-html-ejs插件
• 百度FIS3的官方文档--预处理
• 百度FIS3的官方文档--Mock 假数据模拟

1. 输出可用的模块文件，以ejs例

• 下载 fis3-parser-html-ejs 预处理插件

npm install -g fis3-parser-html-ejs

• dtjs.config.js的配置

dtjs.match('**.html', {
    parser: {
        name: 'fis3-parser-html-ejs',
        options: {
            raw: false
        }
    }
})
 
//添加media属性
dtjs.media('dist').match('**.html', {
    parser: {
        name: 'fis3-parser-html-ejs',
        options: {
            raw: true
        }
    }
})

• 运行输出命令

dtjs output -m dist

• media/m 接口提供多种状态功能，比如有些配置是仅供开发环境下使用，有些则是仅供生产环境使用的

2. 模拟 ajax 接口请求

组内业务暂时没有涉及这块，暂不实现。

文档 & 相关

• API文档地址