《大前端进阶 Node.js》系列 P6必备脚手架/CI构建能力（上）

前言

Coding 应当是一生的事业，而不仅仅是 30 岁的青春🍚
本文已收录 Github https://github.com/ponkans/F2E，欢迎 Star，持续更新💧

P6 前端必备脚手架 /CI 构建能力，顺着怪怪的思路往下看，然后获取文章末尾的源码，跟着源码操作一遍，那样收获最大哦~

本文 cli 已发布至 npm 仓库，如下：

每篇文章都希望你能收获到东西，这篇是前端工程化中脚手架 /CI 构建的流程架构分析，希望你看完，能够有这些收获：

• 前端工程化中脚手架的整体设计与结构
• 能够自己独立为企业订制一套前端脚手架
• 尝试参与公司脚手架共建（你也可以参与部分前端基础建设的工作了哦）

PS：语言只是工具，架构才是核心~ 这期纯干货，源代码在文末~

首先请出今天的主角，当当当当~~，低调奢华有内涵的脚手架 / CI 架构图 ❤，后面的分析都是基于这个结构图展开滴~

必要的小概念

CLI，全称是 command-line interface，也就是命令行界面。

前端脚手架 CLI，是一个命令行工具，它的出现主要解决这几个问题：

• 减少重复性工作
• 规范项目开发目录结构
• 统一团队统一开发风格，便于跨团队合作，以及后期维护，降低新人上手成本
• 提供一键前端项目的创建、配置、本地开发、插件扩展等功能，让开发者更多时间专注于业务

随着前端工程化的发展，越来越多企业选择脚手架来从零到一搭建自己的项目。

其中大家最熟悉的就是 create-react-app 和 vue-cli，它们可以帮助我们”搭建-运行-构建“项目。

但是真正企业中，其实是需要我们自己去订制一套符合公司的脚手架，跟公司一些基础服务打通，上下游的衔接，内置的工具集合等。这时如果你能为公司开发一个定制化的脚手架，你会发现你就是公司最亮的仔仔~~

脚手架思路

在动手开始开发脚手架 CLI 之前我们先捋一下思路，纵览业界比较流行的几个脚手架，会发现虽然它们功能丰富度和复杂程度不一样，但是总体来说都会包含以下基本功能：

CLI 搭建项目

• 根据用户输入生成配置文件
• 下载指定项目模板
• 在目标目录生成新项目

CLI 运行项目

• 本地启动预览
• 热更新
• 语法、代码规范检测

部署项目

• 代码推送至仓库
• 前端部署的管理后台去进行发布

上面的部署部分，只是实现的方式之一，有的需要自动触发打包、发布上线的场景，采用的是去 Gitlab 下一个 Webhook，Gitlab 收到用户 push 代码的操作后，会给前端部署服务中心那边打请求，然后按照事先配置好的进行打包、发布上线。

脚手架开发完成后，我们要让公司其他小伙伴也能立马用上它、爱上它，给它小心心♥(ˆ◡ˆԅ)，所以我们要将脚手架：

• 以 npm 包的方式进行发布，小伙伴就可以直接安装使用了
• 优雅的输出日志，清晰好看

依赖分析

为了实现我们神奇伟大的脚手架，需要引入以下依赖：

• babel-cli/babel-env：语法转换工具，有了它我们在开发脚手架的时候就可以使用 ES6 语法了，不要问我为什么要用 ES6，因为它神奇而伟大
• commander：命令行工具，有了它我们就可以读取命令行命令，知道用户想要做什么了
• inquirer： 交互式命令行工具，给用户提供一个漂亮的界面和提出问题流的方式
• download-git-repo：下载远程模板工具，负责下载远程仓库的模板项目
• chalk：颜色插件，用来修改命令行输出样式，通过颜色区分 info、error 日志，清晰直观
• ora：用于显示加载中的效果，类似于前端页面的 loading 效果，像下载模板这种耗时的操作，有了 loading 效果可以提示用户正在进行中，请耐心等待
• log-symbols：日志彩色符号，用来显示√ 或 × 等的图标

前期准备

项目模板

脚手架可以帮助我们快速生成一套指定的项目结构和配置，最常用的方式就是我们提前准备好一套通用的、易用的、规范的项目模板存放在指定位置，在脚手架执行创建项目命令的时候，直接将准备好的模板拷贝到目标目录下。

PS：这里有两个点需要我们关注一下：

项目模板存放位置方式

第一种是和脚手架打包在一起，在安装脚手架的时候就会将项目模板存放在全局目录下了，这种方式每次创建项目的时候都是从本地拷贝的速度很快，但是项目模板自身升级比较困难。

第二种是将项目模板存在远端仓库（比如 gitlab 仓库），这种方式每次创建项目的时候都是通过某个地址动态下载的，项目模板更新方便。

怪怪我当然选择第二种呀，解耦了模板和脚手架，方便更新维护。

项目模板功能丰富度

所谓项目模板，必然是一个可以作为标杆的项目，我们可以从日常用到的经典项目看出，一个成熟的项目必然支持本地启动打包、支持热更新、支持预发规则和代码风格检查，支持比较流行的语言框架（比如 less，scss 等），更完善点还会支持单元测试。

如果大家只是想快速了解脚手架的搭建流程，可以用 create-react-app 和 vue-cli 搭建一个项目作为模板项目。

当然啦，你们也知道，我是一个有追求有洁癖的接水怪，喜欢自己动手，丰衣足食，所以项目模板我还是从零开始搭建了一个 webpack4+vue+typescript 的项目，项目搭建介绍放在了文章后面，别心急，往下看~

了解如何发布 npm 包

首先你要准备一个 npm 账号，如果没有请到官网注册。有了账号后就可以进行 npm 包的开发和发布了。

1. 初始化。进入要发布的项目根目录执行npm init将其初始化为 npm 包，生成 package.json 文件
2. 登录。在项目根目录执行npm login，根据提示输入注册的用户名、密码和邮箱
3. 发布。在项目跟目录执行npm publish
4. 查看。发布成功之后就可以在npm 官网查看到自己的包了

在发布的过程中可能因为使用了 npm 镜像导致失败，可以按照如下步骤使用nrm切换镜像，然后再发布

npm i -g nrm // 安装nrm

nrm ls // 输出所有镜像

nrm use npm //切换镜像

小伙伴们在给自己的 npm 包起名字的时候，可以先去npm 官网查下是否已经有了这个名字，毕竟世界之大某个角落总会有那么一个人和你志同道合，喜欢上同一个名字，关注同一个接水怪（自恋，该打）~~

脚手架架构图

前面架构、概念该说的都说了，接下来请动起你的小手手，我们要开始搭建脚手架了。

先通过架构图了解下脚手架的大致工作流程。

准备脚手架项目

第一步：创建名为 little-bird-cli 的文件夹作为脚手架项目名。

最初是想要叫 free-cli 的，因为怪怪爱自由，一切我来创建我来写，结果官网查看已经被占用了。但是自由的心不变呀，所以变成了小小鸟，在这里劝大家起名要趁早，学习也要趁早。但分手可不要趁早，毕竟最美不过从相遇到白头️~~

mkdir little-bird-cli && cd little-bird-cli

第二步：npm 初始化，从上文可以了解到，要先初始化为 npm 包，后面才可以发布的。

npm init // 初始化后会生成一个package.json文件哦~

第三步：修改 packgage.json。

• 修改 package.json 中的 bin 参数，专门放置用户的自定义命令，指定可执行文件的位置，bin 里的命令是可执行命令，模块安装的时候如果是全局安装，则 npm 会为 bin 中配置的文件创建一个全局软连接，在命令行工具里可以直接执行。
• 修改 package.json 中的 scripts 参数，指定可执行命令，实时编译脚本，让 node 能够识别并执行。

• 新建 .babelrc 配置文件，支持 ES6 预发转义

• 安装上文中分析的，搭建脚手架需要的相关依赖（忘记了的小伙伴，可以滑到上面依赖分析部分去看看~）

• 补全目录结构

配置全局 CLI 命令

我们的脚手架开发完成发布到 npm 后，可以通过npm install -g free-cli全局安装的方式安装就可以直接使用 CLI 命令了。

但是开发过程中为了方便调试和实时同步修改，需要另外的方式将 CLI 命令链接到全局。

可以在 little-bird-cli 目录下执行npm link，该命令可以将 little-bird-cli 下的 bin 命令软链接到全局，直接使用。

Tips：npm link 的时候遇到过几个小坑跟大家分享一下。

在开发的过程中可能会遇到执行命令失败的情况，比如 zsh: command not found: little-bird-cl。

• 尝试重新链接 npm link，再失败的话就尝试先删除掉全局命令 npm unlink little-bird-cli 然后再链接，一般情况下这样就可以解决了。
• 还是不行就去全局目录里删除 little-bird-cli 文件夹

项目启动

项目启动前，我们先配置下可执行文件，写个简单的 demo，用来启动后验证项目可以正常运转。

可执行文件的行首一定要加入#!/usr/bin/env node这行代码可以告诉系统该脚本由 node 来执行。

bin/cmd

#!/usr/bin/env node
require('../dist/main.js');

src/main.js

console.log('我是一个可以正常运行的项目啦！！！')

开启项目的实时监控npm run watch，这样我们修改代码的时候就会实时更新了~

接下来见证奇迹的时候到了，可以随便找一个目录执行 bin 里自定义的命令【作为一个急性子，多一个字母都不愿意写，所以我会用最简单的那个命令😆lbc】，输入 lbc，你将会看到你想要滴效果😊~

处理命令行

我们通过 commander 来设置不同的命令。

command 方法设置命令的名字、description 方法是设置命令的描述、alias 方法设置命令简称【懒人必备】、options 设置命令需要的参数。commander 更详细的文档可以去 commander官网查看。

我们脚手架先加入三个命令：项目创建、项目初始化、项目启动。源代码在 src/main.js 中。

项目创建

项目创建思路如下：

• 项目创建命令必须输入新建项目名称
• 当前路径下是否存在相同文件名，如果不做这层判断新生成的项目可能会覆盖你已有的项目
• 询问用户，引导用户输入配置信息

• 下载模板项目，下载模版比较耗时，可以通过 ora 提示用户正在下载模版，下载结束后再给出提示

• 项目下载完成后，根据用户输入更新配置文件

启动项目要用的工具方法已经写好，下面我们进入创建正文，src/create.js 中查看源码。

项目初始化

项目初始化主要做以下几点：

• 安装依赖，为了减小项目模板包的大小，下载的模板里不包含 node_modules 目录，创建完成之后要安装依赖
• 初始化 git 仓库，方便代码提交管理
• 自动在远端生成 git 仓库，这一步后续文章补充，这里就先不写了

进入到项目目录，执行初始化命令，lbc init，完成项目初始化

项目启动

所谓项目启动就是说可以让我们的项目本地运行。接下来我们就是借助 webpack 来实现我们脚手架的本地启动。

webpack4+vue+typescript 本地配置好了以后，直接运行 lbc dev -p 3000 就能查看效果哦，哦豁~

发布 & 使用

当当当…小伙伴们迫不及待看成品了吧，在 npm官网查看是否可以搜到

完成！可以通过 npm i -g little-bird-cli 安装脚手架包，装之前最好先把之前开发时链到全局的命令删除掉，安装成功之后就可以使用了 biubiubiubiu~ 发射😊~~

npm unlink little-bird-cli
npm unlink lb-cli
npm unlink lbc
npm i -g little-bird-cli

执行lbc dev -p 8001浏览器会自动打开访问本地项目

入门拓展篇-3 分钟搭建

这里简单介绍一下 WebPack 4 +TypeScript 3 +Vue +less 简单环境搭建。

自己搭建过的小伙伴直接跳到文末吧😊~

项目初始化

mkdir vue-template && cd vue-template
mkdir public
mkdir src && cd  src
mkdir components 
mkdir assets
cd ../
npm init
git init

安装如下依赖：

• 在 webpack4 中已经将 webpack 和它的 cli 分开了，所以需引入 webpack 和 webpack-cli
• 支持热更新，需引入 webpack-dev-server
• 当使用 webpack 打包时，创建一个 html 文件，并把 webpack 打包后的静态文件自动插入到这个 html 文件当中，需引入 html-webpack-plugin
• 支持启动后自动打开浏览器，需引入 open-browser-webpack-plugin
• 支持 vue 解析，需引入 vue-loader 和 vue-template-compiler
• 支持 style、css、less 解析,需引入 style-loader、css-loader 和 less-loader
• 支持 typescript， 需引入 ts-loader

配置文件

• 项目根目录创建 tsconfig.json（开始用不上，但是该文件创建后无需要变动）
• 项目根目录创建 webpack.config.json

• 修改配置文件 package.json

"scripts": {
    "dev":"webpack-dev-server --open --mode development"
}

新建文件

• public 目录新建主入口文件 index.html
• src 目录下新建 vue 入口文件 index.ts

启动项目

• npm run dev

小结

到此为止，我们实现了文章一开始的脚手架的创建，拉取模板，运行部分。也就是下图中的左边部分：

可以优化地方

本来是想把 CI 自动化部署这一块也写进来，但感觉那样文章太长了，所以留到了《大前端进阶 Node.js》系列 P6 前端必备脚手架 /CI 构建能力（下）。也给小伙伴们留足自己实践的时间 ~

作为脚手架的项目模板，有些功能我们会直接继承到脚手架里，所以还会对上面搭建的项目模板做些精简工作。比如项目启动会继承到脚手架里，那么该项目里的相关内容则可去掉。

• 去掉 package.json 的 dev 命令
• 清空 webpack.config.js
• 删除依赖：html-webpack-plugin webpack-dev-server
• 脚手架创建项目时，在远端生成对应仓库

CI 部分

上面小结部分的架构图中，右边部分是下期分享滴，也就是自动化构建，部署 CI 这一块的东西~

• docker + Nginx 实现项目部署
• Gitlab / Github 下 Webhook
• Jenkins 实现自动构建流程

总结

本文已收录 Github https://github.com/ponkans/F2E，欢迎 Star，持续更新💧

PS：✨这期代码有点多，小伙伴们可以直接把源代码下载到本地，对照着源代码，自己实现一遍。

相信正在看文章的多数小伙伴，每天都会用脚手架去做项目，去打包，发布。怪怪觉得了解并自己实现整个前端工程化的流程，是十分必要并且极具意义的一件事

近期热文传送门：

• 《大前端进阶 Node.js》系列 P6必备脚手架/CI构建能力（下）
• 《吐血整理》系列 大厂前端必备工具集合

喜欢的小伙伴麻烦加个关注，点个赞哦，感恩💕😊

联系我 / 公众号

本文脚手架 /CI 构建源代码，公众号回复【脚手架】即可获取，如果有兴趣参与脚手架后期共建，请微信私聊怪怪~

微信搜索【接水怪】或扫描下面二维码回复”加群“，我会拉你进技术交流群。讲真的，在这个群，哪怕您不说话，光看聊天记录也是一种成长。（阿里技术专家、敖丙作者、Java3y、蘑菇街资深前端、蚂蚁金服安全专家、各路大牛都在）。

接水怪也会定期原创，定期跟小伙伴进行经验交流或帮忙看简历。加关注，不迷路，有机会一起跑个步🏃 ↓↓↓