失眠网 > 《大前端进阶 Node.js》系列必知必会必问（面试高频）

《大前端进阶 Node.js》系列必知必会必问（面试高频）

时间：2022-03-29 18:43:34

前言

Coding 应当是一生的事业，而不仅仅是 30 岁的青春🍚
本文已收录 Github /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 包的开发和发布了。

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

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

npmi-gnrm//安装nrmnrmls//输出所有镜像nrmusenpm//切换镜像复制代码

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

脚手架架构图

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

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

准备脚手架项目

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

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

mkdirlittle-bird-cli&&cdlittle-bird-cli复制代码

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

npminit//初始化后会生成一个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/envnoderequire('../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~ 发射😊~~

npmunlinklittle-bird-clinpmunlinklb-clinpmunlinklbcnpmi-glittle-bird-cli复制代码

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

入门拓展篇-3 分钟搭建

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

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

项目初始化

mkdirvue-template&&cdvue-templatemkdirpublicmkdirsrc&&cdsrcmkdircomponentsmkdirassetscd../npminitgitinit复制代码

安装如下依赖：

在 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--modedevelopment"}复制代码

新建文件

public 目录新建主入口文件 index.htmlsrc 目录下新建 vue 入口文件 index.ts

启动项目

npm run dev