前言

Coding 應(yīng)當(dāng)是一生的事業(yè)，而不僅僅是 30 歲的青春🍚
本文已收錄 Github https://github.com/ponkans/F2E，歡迎 Star，持續(xù)更新💧

P6 前端必備腳手架 /CI 構(gòu)建能力，順著怪怪的思路往下看，然后獲取文章末尾的源碼，跟著源碼操作一遍，那樣收獲最大哦~

本文 cli 已發(fā)布至 npm 倉庫，如下：

---

每篇文章都希望你能收獲到東西，這篇是前端工程化中腳手架 /CI 構(gòu)建的流程架構(gòu)分析，希望你看完，能夠有這些收獲：

• 前端工程化中腳手架的整體設(shè)計與結(jié)構(gòu)
• 能夠自己獨立為企業(yè)訂制一套前端腳手架
• 嘗試參與公司腳手架共建（你也可以參與部分前端基礎(chǔ)建設(shè)的工作了哦）

PS：語言只是工具，架構(gòu)才是核心~ 這期純干貨，源代碼在文末~

---

首先請出今天的主角，當(dāng)當(dāng)當(dāng)當(dāng)~~，低調(diào)奢華有內(nèi)涵的腳手架 / CI 架構(gòu)圖 ?，后面的分析都是基于這個結(jié)構(gòu)圖展開滴~

必要的小概念

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

前端腳手架 CLI，是一個命令行工具，它的出現(xiàn)主要解決這幾個問題：

• 減少重復(fù)性工作
• 規(guī)范項目開發(fā)目錄結(jié)構(gòu)
• 統(tǒng)一團隊統(tǒng)一開發(fā)風(fēng)格，便于跨團隊合作，以及后期維護，降低新人上手成本
• 提供一鍵前端項目的創(chuàng)建、配置、本地開發(fā)、插件擴展等功能，讓開發(fā)者更多時間專注于業(yè)務(wù)

隨著前端工程化的發(fā)展，越來越多企業(yè)選擇腳手架來從零到一搭建自己的項目。

其中大家最熟悉的就是 create-react-app 和 vue-cli，它們可以幫助我們”搭建-運行-構(gòu)建“項目。

但是真正企業(yè)中，其實是需要我們自己去訂制一套符合公司的腳手架，跟公司一些基礎(chǔ)服務(wù)打通，上下游的銜接，內(nèi)置的工具集合等。這時如果你能為公司開發(fā)一個定制化的腳手架，你會發(fā)現(xiàn)你就是公司最亮的仔仔~~

腳手架思路

在動手開始開發(fā)腳手架 CLI 之前我們先捋一下思路，縱覽業(yè)界比較流行的幾個腳手架，會發(fā)現(xiàn)雖然它們功能豐富度和復(fù)雜程度不一樣，但是總體來說都會包含以下基本功能：

CLI 搭建項目

• 根據(jù)用戶輸入生成配置文件
• 下載指定項目模板
• 在目標(biāo)目錄生成新項目

CLI 運行項目

• 本地啟動預(yù)覽
• 熱更新
• 語法、代碼規(guī)范檢測

部署項目

• 代碼推送至倉庫
• 前端部署的管理后臺去進行發(fā)布

上面的部署部分，只是實現(xiàn)的方式之一，有的需要自動觸發(fā)打包、發(fā)布上線的場景，采用的是去 Gitlab 下一個 Webhook，Gitlab 收到用戶 push 代碼的操作后，會給前端部署服務(wù)中心那邊打請求，然后按照事先配置好的進行打包、發(fā)布上線。

腳手架開發(fā)完成后，我們要讓公司其他小伙伴也能立馬用上它、愛上它，給它小心心?(????)，所以我們要將腳手架：

• 以 npm 包的方式進行發(fā)布，小伙伴就可以直接安裝使用了
• 優(yōu)雅的輸出日志，清晰好看

依賴分析

為了實現(xiàn)我們神奇?zhèn)ゴ蟮哪_手架，需要引入以下依賴：

• babel-cli/babel-env：語法轉(zhuǎn)換工具，有了它我們在開發(fā)腳手架的時候就可以使用 ES6 語法了，不要問我為什么要用 ES6，因為它神奇而偉大
• commander：命令行工具，有了它我們就可以讀取命令行命令，知道用戶想要做什么了
• inquirer： 交互式命令行工具，給用戶提供一個漂亮的界面和提出問題流的方式
• download-git-repo：下載遠程模板工具，負責(zé)下載遠程倉庫的模板項目
• chalk：顏色插件，用來修改命令行輸出樣式，通過顏色區(qū)分 info、error 日志，清晰直觀
• ora：用于顯示加載中的效果，類似于前端頁面的 loading 效果，像下載模板這種耗時的操作，有了 loading 效果可以提示用戶正在進行中，請耐心等待
• log-symbols：日志彩色符號，用來顯示√ 或 × 等的圖標(biāo)

前期準(zhǔn)備

項目模板

腳手架可以幫助我們快速生成一套指定的項目結(jié)構(gòu)和配置，最常用的方式就是我們提前準(zhǔn)備好一套通用的、易用的、規(guī)范的項目模板存放在指定位置，在腳手架執(zhí)行創(chuàng)建項目命令的時候，直接將準(zhǔn)備好的模板拷貝到目標(biāo)目錄下。

PS：這里有兩個點需要我們關(guān)注一下：

項目模板存放位置方式

第一種是和腳手架打包在一起，在安裝腳手架的時候就會將項目模板存放在全局目錄下了，這種方式每次創(chuàng)建項目的時候都是從本地拷貝的速度很快，但是項目模板自身升級比較困難。

第二種是將項目模板存在遠端倉庫（比如 gitlab 倉庫），這種方式每次創(chuàng)建項目的時候都是通過某個地址動態(tài)下載的，項目模板更新方便。

怪怪我當(dāng)然選擇第二種呀，解耦了模板和腳手架，方便更新維護。

---

項目模板功能豐富度

所謂項目模板，必然是一個可以作為標(biāo)桿的項目，我們可以從日常用到的經(jīng)典項目看出，一個成熟的項目必然支持本地啟動打包、支持熱更新、支持預(yù)發(fā)規(guī)則和代碼風(fēng)格檢查，支持比較流行的語言框架（比如 less，scss 等），更完善點還會支持單元測試。

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

當(dāng)然啦，你們也知道，我是一個有追求有潔癖的接水怪，喜歡自己動手，豐衣足食，所以項目模板我還是從零開始搭建了一個 webpack4+vue+typescript 的項目，項目搭建介紹放在了文章后面，別心急，往下看~

了解如何發(fā)布 npm 包

首先你要準(zhǔn)備一個 npm 賬號，如果沒有請到官網(wǎng)注冊。有了賬號后就可以進行 npm 包的開發(fā)和發(fā)布了。

初始化。進入要發(fā)布的項目根目錄執(zhí)行npm init將其初始化為 npm 包，生成 package.json 文件

登錄。在項目根目錄執(zhí)行npm login，根據(jù)提示輸入注冊的用戶名、密碼和郵箱

發(fā)布。在項目跟目錄執(zhí)行npm publish

查看。發(fā)布成功之后就可以在npm 官網(wǎng)查看到自己的包了

在發(fā)布的過程中可能因為使用了 npm 鏡像導(dǎo)致失敗，可以按照如下步驟使用nrm切換鏡像，然后再發(fā)布

npm?i?-g?nrm?//?安裝nrmnrm?ls?//?輸出所有鏡像nrm?use?npm?//切換鏡像 復(fù)制代碼

小伙伴們在給自己的 npm 包起名字的時候，可以先去npm 官網(wǎng)查下是否已經(jīng)有了這個名字，畢竟世界之大某個角落總會有那么一個人和你志同道合，喜歡上同一個名字，關(guān)注同一個接水怪（自戀，該打）~~

腳手架架構(gòu)圖

前面架構(gòu)、概念該說的都說了，接下來請動起你的小手手，我們要開始搭建腳手架了。

先通過架構(gòu)圖了解下腳手架的大致工作流程。

準(zhǔn)備腳手架項目

第一步：創(chuàng)建名為 little-bird-cli 的文件夾作為腳手架項目名。

最初是想要叫 free-cli 的，因為怪怪愛自由，一切我來創(chuàng)建我來寫，結(jié)果官網(wǎng)查看已經(jīng)被占用了。但是自由的心不變呀，所以變成了小小鳥，在這里勸大家起名要趁早，學(xué)習(xí)也要趁早。但分手可不要趁早，畢竟最美不過從相遇到白頭?~~

mkdir?little-bird-cli?&&?cd?little-bird-cli 復(fù)制代碼

第二步：npm 初始化，從上文可以了解到，要先初始化為 npm 包，后面才可以發(fā)布的。

npm?init?//?初始化后會生成一個package.json文件哦~ 復(fù)制代碼

第三步：修改 packgage.json。

• 修改 package.json 中的 bin 參數(shù)，專門放置用戶的自定義命令，指定可執(zhí)行文件的位置，bin 里的命令是可執(zhí)行命令，模塊安裝的時候如果是全局安裝，則 npm 會為 bin 中配置的文件創(chuàng)建一個全局軟連接，在命令行工具里可以直接執(zhí)行。
• 修改 package.json 中的 scripts 參數(shù)，指定可執(zhí)行命令，實時編譯腳本，讓 node 能夠識別并執(zhí)行。

• 新建 .babelrc 配置文件，支持 ES6 預(yù)發(fā)轉(zhuǎn)義

• 安裝上文中分析的，搭建腳手架需要的相關(guān)依賴（忘記了的小伙伴，可以滑到上面依賴分析部分去看看~）

• 補全目錄結(jié)構(gòu)

配置全局 CLI 命令

我們的腳手架開發(fā)完成發(fā)布到 npm 后，可以通過npm install -g free-cli全局安裝的方式安裝就可以直接使用 CLI 命令了。

但是開發(fā)過程中為了方便調(diào)試和實時同步修改，需要另外的方式將 CLI 命令鏈接到全局。

可以在 little-bird-cli 目錄下執(zhí)行npm link，該命令可以將 little-bird-cli 下的 bin 命令軟鏈接到全局，直接使用。

---

Tips：npm link 的時候遇到過幾個小坑跟大家分享一下。

在開發(fā)的過程中可能會遇到執(zhí)行命令失敗的情況，比如 zsh: command not found: little-bird-cl。

• 嘗試重新鏈接 npm link，再失敗的話就嘗試先刪除掉全局命令 npm unlink little-bird-cli 然后再鏈接，一般情況下這樣就可以解決了。
• 還是不行就去全局目錄里刪除 little-bird-cli 文件夾

項目啟動

項目啟動前，我們先配置下可執(zhí)行文件，寫個簡單的 demo，用來啟動后驗證項目可以正常運轉(zhuǎn)。

可執(zhí)行文件的行首一定要加入#!/usr/bin/env node這行代碼可以告訴系統(tǒng)該腳本由 node 來執(zhí)行。

bin/cmd

#!/usr/bin/env?node require('../dist/main.js'); 復(fù)制代碼

src/main.js

console.log('我是一個可以正常運行的項目啦！！！') 復(fù)制代碼

開啟項目的實時監(jiān)控npm run watch，這樣我們修改代碼的時候就會實時更新了~

接下來見證奇跡的時候到了，可以隨便找一個目錄執(zhí)行 bin 里自定義的命令【作為一個急性子，多一個字母都不愿意寫，所以我會用最簡單的那個命令😆lbc】，輸入 lbc，你將會看到你想要滴效果😊~

處理命令行

我們通過 commander 來設(shè)置不同的命令。

command 方法設(shè)置命令的名字、description 方法是設(shè)置命令的描述、alias 方法設(shè)置命令簡稱【懶人必備】、options 設(shè)置命令需要的參數(shù)。commander 更詳細的文檔可以去 commander官網(wǎng)查看。

我們腳手架先加入三個命令：項目創(chuàng)建、項目初始化、項目啟動。源代碼在 src/main.js 中。

項目創(chuàng)建

項目創(chuàng)建思路如下：

• 項目創(chuàng)建命令必須輸入新建項目名稱
• 當(dāng)前路徑下是否存在相同文件名，如果不做這層判斷新生成的項目可能會覆蓋你已有的項目
• 詢問用戶，引導(dǎo)用戶輸入配置信息

• 下載模板項目，下載模版比較耗時，可以通過 ora 提示用戶正在下載模版，下載結(jié)束后再給出提示

• 項目下載完成后，根據(jù)用戶輸入更新配置文件

啟動項目要用的工具方法已經(jīng)寫好，下面我們進入創(chuàng)建正文，src/create.js 中查看源碼。

項目初始化

項目初始化主要做以下幾點：

• 安裝依賴，為了減小項目模板包的大小，下載的模板里不包含 node_modules 目錄，創(chuàng)建完成之后要安裝依賴
• 初始化 git 倉庫，方便代碼提交管理
• 自動在遠端生成 git 倉庫，這一步后續(xù)文章補充，這里就先不寫了

進入到項目目錄，執(zhí)行初始化命令，lbc init，完成項目初始化

項目啟動

所謂項目啟動就是說可以讓我們的項目本地運行。接下來我們就是借助 webpack 來實現(xiàn)我們腳手架的本地啟動。

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

發(fā)布 & 使用

當(dāng)當(dāng)當(dāng)…小伙伴們迫不及待看成品了吧，在 npm官網(wǎng)查看是否可以搜到

完成！可以通過 npm i -g little-bird-cli 安裝腳手架包，裝之前最好先把之前開發(fā)時鏈到全局的命令刪除掉，安裝成功之后就可以使用了 biubiubiubiu~ 發(fā)射😊~~

npm?unlink?little-bird-cli npm?unlink?lb-cli npm?unlink?lbc npm?i?-g?little-bird-cli 復(fù)制代碼

執(zhí)行l(wèi)bc dev -p 8001瀏覽器會自動打開訪問本地項目

入門拓展篇-3 分鐘搭建

這里簡單介紹一下 WebPack 4 +TypeScript 3 +Vue +less 簡單環(huán)境搭建。

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

---

項目初始化

mkdir?vue-template?&&?cd?vue-template mkdir?public mkdir?src?&&?cd??src mkdir?components? mkdir?assets cd?../ npm?init git?init 復(fù)制代碼

安裝如下依賴：

• 在 webpack4 中已經(jīng)將 webpack 和它的 cli 分開了，所以需引入 webpack 和 webpack-cli
• 支持熱更新，需引入 webpack-dev-server
• 當(dāng)使用 webpack 打包時，創(chuàng)建一個 html 文件，并把 webpack 打包后的靜態(tài)文件自動插入到這個 html 文件當(dāng)中，需引入 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

配置文件

• 項目根目錄創(chuàng)建 tsconfig.json（開始用不上，但是該文件創(chuàng)建后無需要變動）
• 項目根目錄創(chuàng)建 webpack.config.json

• 修改配置文件 package.json

"scripts":?{"dev":"webpack-dev-server?--open?--mode?development" } 復(fù)制代碼

新建文件

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

啟動項目

• npm run dev

小結(jié)

到此為止，我們實現(xiàn)了文章一開始的腳手架的創(chuàng)建，拉取模板，運行部分。也就是下圖中的左邊部分：

可以優(yōu)化地方

本來是想把 CI 自動化部署這一塊也寫進來，但感覺那樣文章太長了，所以留到了《大前端進階 Node.js》系列 P6 前端必備腳手架 /CI 構(gòu)建能力（下）。也給小伙伴們留足自己實踐的時間 ~

作為腳手架的項目模板，有些功能我們會直接繼承到腳手架里，所以還會對上面搭建的項目模板做些精簡工作。比如項目啟動會繼承到腳手架里，那么該項目里的相關(guān)內(nèi)容則可去掉。

• 去掉 package.json 的 dev 命令
• 清空 webpack.config.js
• 刪除依賴：html-webpack-plugin webpack-dev-server
• 腳手架創(chuàng)建項目時，在遠端生成對應(yīng)倉庫

---

CI 部分

上面小結(jié)部分的架構(gòu)圖中，右邊部分是下期分享滴，也就是自動化構(gòu)建，部署 CI 這一塊的東西~

• docker + Nginx 實現(xiàn)項目部署
• Gitlab / Github 下 Webhook
• Jenkins 實現(xiàn)自動構(gòu)建流程

總結(jié)

本文已收錄 Github https://github.com/ponkans/F2E，歡迎 Star，持續(xù)更新💧

PS：?這期代碼有點多，小伙伴們可以直接把源代碼下載到本地，對照著源代碼，自己實現(xiàn)一遍。

相信正在看文章的多數(shù)小伙伴，每天都會用腳手架去做項目，去打包，發(fā)布。怪怪覺得了解并自己實現(xiàn)整個前端工程化的流程，是十分必要并且極具意義的一件事

近期熱文傳送門：

• 《大前端進階 Node.js》系列 P6必備腳手架/CI構(gòu)建能力（下）?
• 《吐血整理》系列 大廠前端必備工具集合

總結(jié)

以上是生活随笔為你收集整理的《大前端进阶 Node.js》系列 必知必会必问（面试高频）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。