阿里云前端工程化工具 - Dawn

一、Dawn 简介

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

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

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

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

  1. CLI(命令行工具)
  2. Middleware(中件间)
  3. Template(工程模板)

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

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

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

那么,使用 DN 的同学分为两大类:

  1. 使用者:使用 DN 工具及其生态,进行工程创建、构建、测试、发布等工作
  2. 贡献者:为 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,欢迎推荐或转岗。

时间: 2024-09-12 09:43:13

阿里云前端工程化工具 - Dawn的相关文章

? 阿里云前端工程化工具 Dawn 正式开源!

Dawn Dawn 取「黎明.破晓」之意,原为「阿里云·业务运营团队」内部的前端构建和工程化工具,现已完全开源.它通过 pipeline 和 middleware 将开发过程抽象为相对固定的阶段和有限的操作,简化并统一了开发人员的日常构建与开发相关的工作. 项目地址:https://github.com/alibaba/dawn (感兴趣请赏个 Star) 特点 采用中间件技术,封装常用功能,易于扩展,方便重用 支持 pipeline 让多个 task 协同完成构建任务 简单.一致的命令行接口,

阿里云前端周刊 - 第 24 期

推荐 1. Firefox 引入 Headless 模式 https://developer.mozilla.org/en-US/Firefox/Headless_mode 类似于 Chrome 的 Headless 模式,现在 Firefox 也引入了 Headless 模式,其允许开发者利用 Firefox 进行更加方便地自动化测试.动态网页抓取等操作:本文也介绍了如何利用 Selenium 控制 Firefox 进行自动化浏览器操作等内容. 2. Webpack 4 开发计划 https:

阿里云前端周刊 - 第 20 期

推荐 1. 阿里电商架构演变之路 https://yq.aliyun.com/articles/161190 首届阿里巴巴中间件技术峰会上,阿里巴巴中间件技术部专家唐三带来"阿里电商架构演变之路"的演讲,本文从阿里业务和技术架构开始引入,分别分享了阿里电商从1.0到4.0架构的演变之路,着重分析了分布式和异地多活的改变之路. 2. WebVR开发教程 - 深度剖析 https://zhuanlan.zhihu.com/p/28324884 最近WebVR API 1.1已经发布,2.0

阿里云前端周刊 - 往期回顾(1-3)

阿里云前端周刊 - 第 1 期 一.推荐. 1. 如何撰写 Git 提交信息 https://chris.beams.io/posts/git-commit/ 重建一段代码的上下文是非常费时费力的,这是无法完全避免的.所以我们应该努力尽可能的减少它.提交信息可以帮上这个忙,也正因为此,一个提交信息反应了一名开发者是不是个好的协作者. 2. 十个关于 Node.js REST API 的最佳实践 http://zcfy.baomitu.com/article/10-best-practices-f

阿里云前端周刊 - 第 31 期

推荐 1. 利用 Dawn 工程化工具实践 MobX 数据流管理方案 https://zhuanlan.zhihu.com/p/30554301 项目在最初应用 MobX 时,对较为复杂的多人协作项目的数据流管理方案没有一个优雅的解决方案,通过对MobX官方文档中针对大型可维护项目最佳实践的学习和应用,把自己的理解抽象出一个简单的todoMVC应用,供大家交流和讨论. 2. FreeWheel 前后端分离改造实践 http://www.infoq.com/cn/articles/freewhee

快速接入阿里云应用配置管理工具 轻松开启企业效率新时代

日前,阿里云正式推出了应用配置管理(Application Configuration Manangement,简称 ACM)工具产品,这是一款在分布式架构环境中对应用配置进行集中管理和推送的工具类产品,在微服务.DevOps.大数据等场景下极大地减轻配置管理的工作量,增强配置管理的服务能力. 配置是管理应用变更的常见手段之一,在应用生命周期管理中,通常会将应用发布后需要改变的一些配置项或者元数据从代码中分离出来,放在单独的配置文件中管理,以便应用在发布之后,运维人员或最终用户可以通过调整配置来

阿里云前端周刊 - 第 32 期

推荐 1. Preact:一个备胎的自我修养 https://zhuanlan.zhihu.com/p/30796007 前一段时间由于React Licence的问题,团队内部积极的探索React的替代方案,同时考虑到之后可能开展的移动端业务,团队目标是希望能够找到一个迁移成本低,体量小的替代产品.经过多方探索,Preact进入了我们的视野.从接触到Preact开始,一路学习下来折损了许多头发,也收获不少思考,这里想和大家介绍一下Preact的实现思路,也分享一下自己的思考所得. 2. 图片即

阿里云前端周刊 - 第 19 期

推荐 1. 高性能 MobX 模式(part 3)- 用例教程 https://zhuanlan.zhihu.com/p/28199184 前面两部分把重点放在了 MobX 基础模块的构建上.用这些模块我们可以开始解决一些现实场景的问题了.这篇文章将会通过一系列的示例来应用我们已经了解的概念. 当然了,这不会是一个冗长的列表,而是可以让你尝试转变思维去应用 MobX.所有示例都没有使用 @decorator 的语法来实现.这样可以让你在 Chrome 控制台.Node命令行环境或者是像 Webs

阿里云前端周刊 - 第 30 期

推荐 1. React 16 新特性尝鲜实战教程 https://juejin.im/post/59f26fe5f265da43252889d9 React 16 的发布除开源许可证和 Fiber 机制全面开启之外,还为我们提供了部分非常强大的新特性,本视频教程将通过实例带你探索这些新特性,从 Error Boundary 到 Text Only Component,再到 Portal,共 6 小节,19 分钟,每个小节实例讲解一个新特性,在讲解新特性基本用法的同时会介绍新特性的最佳实践.学完本