《大前端进阶 Node.js》系列 必知必会必问(面试高频)
前言
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)一團(tuán)隊統(tǒng)一開發(fā)風(fēng)格,便于跨團(tuán)隊合作,以及后期維護(hù),降低新人上手成本
- 提供一鍵前端項目的創(chuàng)建、配置、本地開發(fā)、插件擴(kuò)展等功能,讓開發(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ī)范檢測
部署項目
- 代碼推送至倉庫
- 前端部署的管理后臺去進(jìn)行發(fā)布
上面的部署部分,只是實現(xiàn)的方式之一,有的需要自動觸發(fā)打包、發(fā)布上線的場景,采用的是去 Gitlab 下一個 Webhook,Gitlab 收到用戶 push 代碼的操作后,會給前端部署服務(wù)中心那邊打請求,然后按照事先配置好的進(jìn)行打包、發(fā)布上線。
腳手架開發(fā)完成后,我們要讓公司其他小伙伴也能立馬用上它、愛上它,給它小心心?(????),所以我們要將腳手架:
- 以 npm 包的方式進(jìn)行發(fā)布,小伙伴就可以直接安裝使用了
- 優(yōu)雅的輸出日志,清晰好看
依賴分析
為了實現(xiàn)我們神奇?zhèn)ゴ蟮哪_手架,需要引入以下依賴:
- babel-cli/babel-env:語法轉(zhuǎn)換工具,有了它我們在開發(fā)腳手架的時候就可以使用 ES6 語法了,不要問我為什么要用 ES6,因為它神奇而偉大
- commander:命令行工具,有了它我們就可以讀取命令行命令,知道用戶想要做什么了
- inquirer: 交互式命令行工具,給用戶提供一個漂亮的界面和提出問題流的方式
- download-git-repo:下載遠(yuǎn)程模板工具,負(fù)責(zé)下載遠(yuǎn)程倉庫的模板項目
- chalk:顏色插件,用來修改命令行輸出樣式,通過顏色區(qū)分 info、error 日志,清晰直觀
- ora:用于顯示加載中的效果,類似于前端頁面的 loading 效果,像下載模板這種耗時的操作,有了 loading 效果可以提示用戶正在進(jìn)行中,請耐心等待
- log-symbols:日志彩色符號,用來顯示√ 或 × 等的圖標(biāo)
前期準(zhǔn)備
項目模板
腳手架可以幫助我們快速生成一套指定的項目結(jié)構(gòu)和配置,最常用的方式就是我們提前準(zhǔn)備好一套通用的、易用的、規(guī)范的項目模板存放在指定位置,在腳手架執(zhí)行創(chuàng)建項目命令的時候,直接將準(zhǔn)備好的模板拷貝到目標(biāo)目錄下。
PS:這里有兩個點需要我們關(guān)注一下:
項目模板存放位置方式
第一種是和腳手架打包在一起,在安裝腳手架的時候就會將項目模板存放在全局目錄下了,這種方式每次創(chuàng)建項目的時候都是從本地拷貝的速度很快,但是項目模板自身升級比較困難。
第二種是將項目模板存在遠(yuǎn)端倉庫(比如 gitlab 倉庫),這種方式每次創(chuàng)建項目的時候都是通過某個地址動態(tài)下載的,項目模板更新方便。
怪怪我當(dāng)然選擇第二種呀,解耦了模板和腳手架,方便更新維護(hù)。
項目模板功能豐富度
所謂項目模板,必然是一個可以作為標(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)注冊。有了賬號后就可以進(jìn)行 npm 包的開發(fā)和發(fā)布了。
在發(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)依賴(忘記了的小伙伴,可以滑到上面依賴分析部分去看看~)
-
補(bǔ)全目錄結(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 更詳細(xì)的文檔可以去 commander官網(wǎng)查看。
我們腳手架先加入三個命令:項目創(chuàng)建、項目初始化、項目啟動。源代碼在 src/main.js 中。
項目創(chuàng)建
項目創(chuàng)建思路如下:
- 項目創(chuàng)建命令必須輸入新建項目名稱
- 當(dāng)前路徑下是否存在相同文件名,如果不做這層判斷新生成的項目可能會覆蓋你已有的項目
- 詢問用戶,引導(dǎo)用戶輸入配置信息
-
下載模板項目,下載模版比較耗時,可以通過 ora 提示用戶正在下載模版,下載結(jié)束后再給出提示
-
項目下載完成后,根據(jù)用戶輸入更新配置文件
啟動項目要用的工具方法已經(jīng)寫好,下面我們進(jìn)入創(chuàng)建正文,src/create.js 中查看源碼。
項目初始化
項目初始化主要做以下幾點:
- 安裝依賴,為了減小項目模板包的大小,下載的模板里不包含 node_modules 目錄,創(chuàng)建完成之后要安裝依賴
- 初始化 git 倉庫,方便代碼提交管理
- 自動在遠(yuǎn)端生成 git 倉庫,這一步后續(xù)文章補(bǔ)充,這里就先不寫了
進(jìn)入到項目目錄,執(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
新建文件
- public 目錄新建主入口文件 index.html
- src 目錄下新建 vue 入口文件 index.ts
啟動項目
- npm run dev
小結(jié)
到此為止,我們實現(xiàn)了文章一開始的腳手架的創(chuàng)建,拉取模板,運行部分。也就是下圖中的左邊部分:
可以優(yōu)化地方
本來是想把 CI 自動化部署這一塊也寫進(jìn)來,但感覺那樣文章太長了,所以留到了《大前端進(jìn)階 Node.js》系列 P6 前端必備腳手架 /CI 構(gòu)建能力(下)。也給小伙伴們留足自己實踐的時間 ~
作為腳手架的項目模板,有些功能我們會直接繼承到腳手架里,所以還會對上面搭建的項目模板做些精簡工作。比如項目啟動會繼承到腳手架里,那么該項目里的相關(guān)內(nèi)容則可去掉。
- 去掉 package.json 的 dev 命令
- 清空 webpack.config.js
- 刪除依賴:html-webpack-plugin webpack-dev-server
- 腳手架創(chuàng)建項目時,在遠(yuǎn)端生成對應(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)整個前端工程化的流程,是十分必要并且極具意義的一件事
近期熱文傳送門:
- 《大前端進(jìn)階 Node.js》系列 P6必備腳手架/CI構(gòu)建能力(下)?
- 《吐血整理》系列 大廠前端必備工具集合
總結(jié)
以上是生活随笔為你收集整理的《大前端进阶 Node.js》系列 必知必会必问(面试高频)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 家长警惕 这4类孩子最易反复感冒
- 下一篇: sql server服务器 性能,初涉S