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

时间 2020-04-05

标签大前端进阶 Node.js 系列 p6 必备脚手架构建能力栏目 Node.js 繁體版

原文原文链接

前言

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

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

本文 cli 已发布至 npm 仓库，以下：前端

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

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

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

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

必要的小概念

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

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

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

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

其中你们最熟悉的就是 create-react-app 和 vue-cli，它们能够帮助咱们”搭建-运行-构建“项目。web

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

脚手架思路

在动手开始开发脚手架 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 包的开发和发布了。

初始化。进入要发布的项目根目录执行npm init将其初始化为 npm 包，生成 package.json 文件
登陆。在项目根目录执行npm login，根据提示输入注册的用户名、密码和邮箱
发布。在项目跟目录执行npm publish
查看。发布成功以后就能够在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：✨这期代码有点多，小伙伴们能够直接把源代码下载到本地，对照着源代码，本身实现一遍。

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

近期热文传送门：

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

联系我 / 公众号

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

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

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