申明：这不是一个kpi项目，仅仅是为了分享我们的一些经验，欢迎沟通交流。serve、打包、lint、mock等，将这些功能点抽象成一个个中间件，方便插拔。修改项目配置不用修改dn，只需要修改项目根目录下.yml文件即可。源码开源流程中，欢迎关注。

一、Dawn 简介

Dawn（后续将简称为 DN）是阿里云前端团队，新一代的前端构建工具，简化并统一了针对开发人员的「命令行接口」，将开发过程抽象为有序的 6 个阶段 + 1 个常用操作。不会因为工具本身的扩展，而扩展新的用法，统一、一致，免于记忆，通过 DN 创建的工程还将会结合 GitLab CI 进行持续集成。

DN 相较于同类工具的特点是什么？

简单、统一、一致，无论扩展还是使用它。
无关框架、甚至可以无关语言、轻中心化（并非完全去中心化，而是「轻」）
松散且易于整合，注重重用，易于扩展
云端统一下发构建规则，易团队统一管理
免于安装或更新，除 CLI 外，无须其它任何形式的安装和更新操作

相较于同类工具而言，DN 采用了独有的机制，将整个整个工具拆分为三大部分：

CLI（命令行工具）
Middleware（中件间）
Template（工程模板）

通过「中间件」方式抽离可重用功能，包括但不限于「创建、构建、测试、发布」等，不同阶段可能出现的操作，都将通过简单的 API 封装为「中间件」，并相互「无依赖」，松散且易于整合。

任何搭建好的「普通工程」，都可以轻松发布为「模板」，制作模板变得极其简单，只需做两件事情：

组织工程目录结构并配好相关依赖。
配置 pipe.yml 声明各阶段要做的事情。

那么，使用 DN 的同学分为两大类：

使用者：使用 DN 工具及其生态，进行工程创建、构建、测试、发布等工作
贡献者：为 DN 开发新的「中件间」，制作新的「工程模板」，或提出任何建议。

二、安装和更新

依赖的环境、软件及其版本：

Node.js v7.6.0 及以上版本
Tnpm 4.x 因为 DN 发布于内网 registry
部分现有中件间还依赖 Git，比如「前端资源发布中件间」

安装或更新 DN:

$ 即将开源，敬请期待

部分同学的电脑可能需加 sudo

在 Windows 上使用 DN

Dawn Core 本身兼容 Windows，但是有一些中件间会动态执行 Shell 脚本，对应的「脚本」目前并不能 100% 兼容 Windows，做如下配置，可以在 Windows 更好的使用 Dawn：

完成以上检查或配置后，通过「运行->CMD」打开「命行行窗口」，好了，在 Windows 使用 DN 吧

三、基本使用

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，扩展或改过它，那么继续向下看。

四、命令执行过程

初始化执行过程

user->cli: 执行 init
cli->conf: 拉取模板列表
conf->cli: 工程模板列表
cli->user: 让用户选择工程模板
user->cli: 选择指定的工程模板
cli->repo: 下载工程模板
repo->cli: 工程模板
cli->project: 复制工作文件
cli->project: 安装依赖

命令（pipe）执行过程

cli->project: 读取本地 pipe 配置
project->cli: 本地 pipe 配置
cli->conf: 读取公共 pipe 配置
cli->cli: 合并配置
cli->conf: 查找中件间
cli->repo: 加载中件间
cli->project: 执行 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();

  };

};

中间件开发完成后，推送到内网 Git 任意「公开的 Repo」后，可联系管理员发布对应中件间。

中间件式的工程化方案，包含初始化模板、自定义模板、中央控制、持续集成、自动推送git等功能。开源中，欢迎关注后续进展。

按照国际惯例，此处打个广告：求P6/P7/P8前端工程师，欢迎投简历至: xiaoming.dxm@alibaba-inc.com. 注明来自：知乎。感谢。