阅读 14681

《大前端进阶 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-appvue-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:✨这期代码有点多,小伙伴们可以直接把源代码下载到本地,对照着源代码,自己实现一遍。

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

近期热文传送门:


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

联系我 / 公众号

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


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

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