324
阿里云前端工程化工具 - Dawn
一、Dawn 简介
Dawn（后续将简称为 DN）是阿里云前端团队，新一代的前端构建工具，简化并统一了针对开发人员的「命令行接口」，将开发过程抽象为有序的 6 个阶段 + 1 个常用操作。不会因为工具本身的扩展，而扩展新的用法，统一、一致，免于记忆，通过 DN 创建的工程还将会结合 GitLab CI 进行持续集成。
DN 相较于同类工具的特点是什么？
- 简单、统一、一致，无论扩展还是使用它。
- 无关框架、甚至可以无关语言、轻中心化（并非完全去中心化，而是「轻」）
- 松散且易于整合，注重重用，易于扩展
- 云端统一下发构建规则，易团队统一管理
- 免于安装或更新，除 CLI 外，无须其它任何形式的安装和更新操作
相较于同类工具而言，DN 采用了独有的机制，将整个整个工具拆分为三大部分：
- CLI（命令行工具）
- Middleware（中件间）
- Template（工程模板）
通过「中间件」方式抽离可重用功能，包括但不限于「创建、构建、测试、发布」等，不同阶段可能出现的操作，都将通过简单的 API 封装为「中间件」，并相互「无依赖」，松散且易于整合。
任何搭建好的「普通工程」，都可以轻松发布为「模板」，制作模板变得极其简单，只需做两件事情：
- 组织工程目录结构并配好相关依赖。
- 配置 pipe.yml 声明各阶段要做的事情。
那么，使用 DN 的同学分为两大类：
- 使用者：使用 DN 工具及其生态，进行工程创建、构建、测试、发布等工作
- 贡献者：为 DN 开发新的「中件间」，制作新的「工程模板」，或提出任何建议。
二、安装和更新
依赖的环境、软件及其版本：
- 需要在公司内网或拨入 VPN
- Node.js v7.6.0 及以上版本
- Tnpm 4.x 因为 DN 发布于内网 registry
- 部分现有中件间还依赖 Git，比如「前端资源发布中件间」
安装或更新 DN:
$ tnpm i @ali/dawn -g
部分同学的电脑可能需加 sudo
二、基本使用
1. init 命令
$ mkdir demo
$ cd demo
$ dn init [template] [--force]
如果指定了 template 直接按指定的模板初始化项目，否则列出来可用「模板列表」，如下：
? 共 8 个可用模板，回车初始化对应工程 (Use arrow keys)
1. node : 普通 Node.js 工程
2. front : 普通 SPA 前端工程
3. multipage : 支持多页面的前端工程
4. dbl-template-dblm : DBL 团队移动工程模板
5. console : 控制台模板
6. prev2next : prev 版本 dbl 工程一键迁移
7. midway : midway 工程模板
8. middleware : DBL vNext 中间件工程
选择一个工程类型，回车即可按向导初始化一个工程。
2. dev 命令
$ dn dev
通过 dev 命即可开始开发，通常会启动自动构建服务，取决于你的工程模板可能会有不同处理，例如 front 工程 会启动并打印出相关信息：
加载中间件...
完成
清理文件或目录...
完成
开始构建...
启动开发服务器...
The server on "localhost:8001" started
实时编译完成: 1493200481119
3. test 命令
$ dn test
test 是至关重要的命令，重要的动作之前常会触发 test 的执行，比如 publish 之前，同时，通过 DN 创建工程将会自动启用 CI（持续集成），当你有新的代码 push 到 Git 某个分支，会是创建了 Merge Request 时，CI Job 将会被触发，将会通过 dn test 进行自动化测试，在测试通过后还将尝试通过 dn build 自动构建，执行示例如下：
加载中间件...
完成
执行静态检查...
/Users/ali-130284n/demo/src/index.js
1:1 warning Unexpected console statement no-console
1 problem (0 errors, 1 warning)
完成
4. build 命令
$ dn build
执行构建任务，不同的工程类型的构建过程和结果可能不同，取决于初始化工程时使用的工程模板，例如 例如 front 工程 会打包所有前端资源并钱如下信息：
加载中间件...
完成
清理文件或目录...
完成
开始构建...
完成
完成后，会在当前项目的根目录产生 build 目录，这是构建结果。
5. publish 命令
可以通过 publish 命将发布代码或构建结果，不同的工程模板决定了最终发布位置，是否支持 publish 命令决定于选择的「工程模板」，比如 front 工程的发布大约如下：
发布到预发...
加载中间件...
完成
执行静态检查...
/Users/ali-130284n/ali/dev/dbl-repos/dbl-template-front/src/index.js
1:1 warning Unexpected console statement no-console
1 problem (0 errors, 1 warning)
完成
加载中间件...
完成
找到存在的 pre-push
清理文件或目录...
完成
开始构建...
完成
Total 0 (delta 0), reused 0 (delta 0)
To gitlab.alibaba-inc.com:dbl-repos/dbl-template-front.git
3cf3
完成
如果您仅仅是使用 DN，用于创建、构建或发布工程，我告诉你，这几个命令就够了，如果您想进一步了解，或者贡献 DN，扩展或改过它，那么继续向下看。
三、命令执行过程
初始化执行过程
命令（pipe）执行过程
四、如何制作一个工程模板
通常您应先看看是否已经存满足您需求的模板，查看已发布的工程模板，可以通过如下命令：
$ dn system template
将会列出所有可用的工程模板，如下:
? 共 8 个可用模板，回车打开说明文档 (Use arrow keys)
1. node : 普通 Node.js 工程
2. front : 普通 SPA 前端工程
3. multipage : 支持多页面的前端工程
4. dbl-template-dblm : DBL 团队移动工程模板
5. console : 控制台模板
6. prev2next : prev 版本 dbl 工程一键迁移
7. midway : midway 工程模板
8. middleware : DBL vNext 中间件工程
上下箭头键可以选择指定中件间，然后「回车」可以查看对应中件间的在线使用说明。
DN 本身只对开发人员提供一致的命令行接口，不同的工程类型的构建过程，由和 template 通过 pipe 配置声明各个阶段 pipeline 中的 middleware 完成，一个「普通的工程」搭建好后就可发布为一个「工程模板」，通常一个「工程模板」有基本固定的目录结构，比如：
project
├── .dbl-next
├── README.md
├── build
│ ├── index.html
│ └── js
│ ├── common.js
│ └── index.js
├── package.json
└── src
├── assets
│ └── index.html
└── index.js
模板配置存放于 .dn-next 目录，其中最重要的是 pipe 配置，大体如下：
init:
- name: tnpm-install
- name: pkginfo
dev:
- name: clean
- name: webpack2
watch: true
- name: server
build:
- name: clean
- name: webpack2
test:
- name: lint
publish:
- name: shell
script:
- dn test
- dn build -e prod
- name: alicdn-publish
每个阶段都可声明要做的事情，通常对庆一个个中件间，每个中件间可能用不同用法，不同的工程模板可根据需求进行不同的配置，具体用法可参考各中件间的使用说明。
pipe 还可以是 json 格式：
{
"init": [
{
"name": "tnpm-install"
}
],
"dev": [
{
"name": "$local",
"location": "./lib/index.js"
}
]
}
工程模板通过 pipe 辅助 cli 完成对应的构建任务，一个工程中模板可以在每个 pipe 中放置多个「中间件」，支持的 pipe 有：
| 名称 | 说明 |
|---|---|
| init | 在初始化工程的时候触发 |
| dev | 在启动开发服务时触发 |
| test | 在添加项目元素时候触发 |
| test | 在执行测试的时候触发 |
| build | 在执行构建时触发 |
| pubish | 在执行发布时触发 |
工程模板制作完成后，推送到内网 GitLab 任意「公开的 Repo」 后，可联系 @正锋 发布对应工作模板。
五、如何开发一个中间件
通常您应先看看是否已经存满足您需求的中件间，查看已发布的中间件，可以通过如下命令：
$ dn system middleware
将会列出所有可用的中间件，如下:
? 共 14 个可用中件间，回车打开说明文档 (Use arrow keys)
01. shell : 可执行 shell 的中间件
02. list : 通过列表选择进行分支执行的中件间
03. pkginfo : 可设定 Node 包信息的中间件
04. clean : 清理文件或目录的中件间
05. prepush : Git Hook - pre-push
06. tnpm-install : Node 模块依赖安装插件
07. tnpm-publish : Node 模块依赖安装插件
08. lint : 语法检查中间件
09. mocha : 基于 mocha 的单元测试中间件
上下箭头键可以选择指定中件间，然后「回车」可以查看对应中件间的在线使用说明，多数常用的功能，比如 webpack、lint 都已有可用的「中间件」提供。
当您决定要开发一个新的中件间时，您可以通过 dn init 命令，然后选择「中件间工程模板」即可快速创建一个「中件间」，如下：
? 共 8 个可用模板，回车初始化对应工程
1. node : 普通 Node.js 工程
2. front : 普通 SPA 前端工程
3. multipage : 支持多页面的前端工程
4. dbl-template-dblm : DBL 团队移动工程模板
5. console : 控制台模板
6. prev2next : prev 版本 dbl 工程一键迁移
7. midway : midway 工程模板
8. middleware : DBL vNext 中间件工程
DN 中间件和 Koa 中件间类似，中件间核心基础代码结构如下：
/**
* 这是一个标准的中间件工程模板
* @param {object} opts cli 传递过来的参数对象 (在 pipe 中的配置)
* @return {AsyncFunction} 中间件函数
*/
module.exports = function (opts) {
//外层函数的用于接收「参数对象」
//必须返回一个中间件处理函数
return async function (next) {
//在这里处理你的逻辑
this.console.log('This is an example');
//next 触发后续执行
//如果需要在后续中间件执行完成再做一些处理
//还可以 await next(); 并在之后添加逻辑
next();
};
};
中间件开发完成后，推送到内网 GitLab 任意「公开的 Repo」后，可联系 @正锋 发布对应中件间。
-- end --
AD：
阿里云业务运营前端团队招聘 P6/7，欢迎推荐或转岗。
最后更新：2017-07-24 16:02:35