引言
下面是一個使用腳手架來初始化項目的典型例子。
隨著前端工程化的理念不斷深入,越來越多的人選擇使用腳手架來從零到一搭建自己的項目。其中大家最熟悉的就是create-react-app和vue-cli,它們可以幫助我們初始化配置、生成項目結構、自動安裝依賴,最后我們一行指令即可運行項目開始開發,或者進行項目構建(build)。
這些腳手架提供的都是普遍意義上的最佳實踐,但是我在開發中發現,隨著業務的不斷發展,必然會出現需要針對業務開發的實際情況來進行調整。例如:
通過調整插件與配置實現 Webpack 打包性能優化后
刪除腳手架構建出來的部分功能
項目架構調整
融合公司開發工具
……
總而言之,隨著業務發展,我們往往會沉淀出一套更“個性化”的業務方案。這時候我們最直接的做法就是開發出一個該方案的腳手架來,以便今后能復用這些最佳實踐與方案。
1. 腳手架怎么工作?功能豐富程度不同的腳手架,復雜程度自然也不太一樣。但是總體來說,腳手架的工作大體都會包含幾個步驟:
初始化,一般在這個時候會進行環境的初始化,做一些前置的檢查
用戶輸入,例如用 vue-cli 的時候,它會“問”你很多配置選項
生成配置文件
生成項目結構,這是候可能會使用一個項目模版
安裝依賴
清理、校驗等收尾工作
此外,你還需要處理命令行行為等。往往我們只是想輕量級、快速得創建一個特定場景的腳手架(不用想vue-cli那么完備)。而對于想要快速創建一個腳手架,其實我們不用完全從零開始。Yeoman 就是一個可以幫我們快速創建腳手架的工具。
可能很多同學都不太了解,那么先簡單介紹一下 Yeoman 是什么,又是如何幫我們來簡化腳手架搭建的。
首先,Yeoman 可以簡單理解為是一個腳手架的運行框架,它定義了一個腳手架在運行過程中所要經歷的各個階段(例如我們上面說的,可能會先讀取用戶輸入,然后生成項目文件,最后安裝依賴),我們所需要的就是在生命周期的對應階段,填充對應的操作代碼即可。而我們填充代碼的地方,在 Yeoman 中叫做 generator,物如其名,Yeoman 通過調用某個 generator 即可生成(generate)對應的項目。
如果你還不是特別清楚它們之間的關系,那么可以舉個小例子:
將腳手架開發類比為前端組件開發,Yeoman 的角色就像是 React,是一個框架,尤其是定義了組件的生命周期函數;而 generator 類似于你寫的一個 React 業務組件,根據 React 的規則在各個生命周期中填代碼即可。
Yeoman 內置的“生命周期”方法執行順序如下:
initializing
prompting
default
writing
conflicts
install
end
其中 default 階段會執行你自定義地各種方法。
同時,Yeoman 還集成了腳手架開發中常用的各類工具,像是文件操作、模版填充、終端上的用戶交互功能,命令行等,并且封裝成了簡單易用的方法。
通過這兩點,Yeoman 可以幫我們大大規范與簡化腳手架的開發。
2. 開發一個自己的腳手架了解了一些腳手架的工作方式與 Yeoman 的基本概念,咱們就可以來創建一個屬于自己的腳手架。作為例子,這個腳手架的功能很簡單,它會為我們創建一個最簡版的基于 Webpack 的前端項目。最終腳手架使用效果如下:
2.1. 準備一個項目模版腳手架是幫助我們快速生成一套既定的項目架構、文件、配置,而最常見的做法的就是先寫好一套項目框架模版,等到腳手架要生成項目時,則將這套模版拷貝到目標目錄下。這里其實會有兩個小點需要關注。
第一個是模版內變量的填充。
在模版中的某些文件內容可能會需要生成時動態替換,例如根據用戶在終端中輸入的內容,動態填充package.json中的name值。而 Yeoman 內置了 ejs 作為模版引擎,可以直接使用。
第二個就是模版的放置位置。
一種是直接放在本地,也就是直接放到 generator 中,跟隨 generator 一起下載,每次安裝都是本地拷貝,速度很快,但是項目模版自身的更新升級比較困難,需要提示用戶升級 generator。
另一種則是將模版文件放到某個服務器上,每次使用腳手架初始化時通過某個地址動態下載,想要更新升級模版會很方便,通常會選擇托管在 github 上。
關于第二個模版放置究竟是選擇在本地好,還是遠端好,其實還是依據你個人的業務場景而定,在不同的場景的限制的需求不同,我之前既寫過模版放在本地的腳手架(即和腳手架一起通過 npm 安裝),也寫過托管在 git 倉庫上的這種方式。
回到我們「創建一個最簡版的基于 Webpack 的前端項目」的目標,我準備了一個項目模版,之后就會用它來作為腳手架生成的項目內容。
2.2. 創建 generator(yeoman-generator)創建 Yeoman 的 generator 需要遵循它的規則。
首先是 generator 命名規則。需要以generator打頭,橫線連接。例如你想創建一個名為 webpack-kickoff 的 generator,包名需要取成 generator-webpack-kickoff。
這樣,當你通過
npm i -g yo
安裝完 Yeoman 的 CLI 后,就可以通過yo命令來使用 generator 來啟動腳手架:
yo webpack-kickoff
這里的 webpack-kickoff 就是包名里generator-后面的內容,Yeoman 會按這個規則去全局找相匹配的包。
其次,依據 Yeoman 的規范,默認情況下你需要在項目(即 generator)的generators/app/目錄下創建index.js,在其中寫入你的腳手架工作流程。當然,也可以通過修改配置來擴展或改變這個規則。
此外,你創建的 generator 類需要繼承 yeoman-generator。所以我們會在generators/app/index.js中寫如下代碼:
const Generator = require("yeoman-generator"); class WebpackKickoffGenerator extends Generator { constructor(params, opts) { super(params, opts); } } module.exports = WebpackKickoffGenerator;
還記得之前提到的“生命周期”方法么?包括 initializing、prompting、default、writing、conflicts、install 和 end。除了default,其他都代表了 Generator 中的一個同名方法,你需要的就是在子類中重寫后所需的對應方法。default階段則會執行用戶定義的類方法。
例如,你想在初始化時打印下版本信息,可以這么做:
const Generator = require("yeoman-generator"); class WebpackKickoffGenerator extends Generator { constructor(params, opts) { super(params, opts); } initializing() { const version = require("../../package.json").version; this.log(version); } } module.exports = WebpackKickoffGenerator;
可見,剩下的工作就是在 WebpackKickoffGenerator 類中填充各種方法的實現細節了。
2.3. 處理用戶交互腳手架工作中一般都會有一些用戶自定義的內容,例如創建的項目目錄名,或者是否啟用某個配置等。這些交互一般都是通過交互式的終端來實現的,例如下面這個功能。
可以使用 Inquirer.js 來實現。而 Yeoman 已經幫我們集成好了,直接在 generator 里調用 this.prompt 即可。
在用戶交互部分的需求也比較簡單,只需要詢問用戶所需創建的項目目錄名即可,隨后也會作為項目名。按照 Yeoman 的流程規范,我們將該部分代碼寫在 prompting 方法中:
class WebpackKickoffGenerator extends Generator { // …… prompting() { const done = this.async(); const opts = [{ type: "input", name: "dirName", message: "Please enter the directory name for your project:", default: "webpack-app", validate: dirName => { if (dirName.length < 1) { return "?? directory name must not be null!"; } return true; } }]; return this.prompt(opts).then(({dirName}) => { this.dirName = dirName; done(); }); } // …… }
注意,由于用戶交互是一個“異步”的行為,為了讓后續生命周期方法在“異步”完成后再繼續執行,需要調用this.async()方法來通知方法為異步方法,避免順序執行完同步代碼后直接調用下一階段的生命周期方法。調用后會返回一個函數,執行函數表明該階段完成。
2.4. 下載模版正如2.1.中所述,我們選擇將模版托管在 github 上,因此在生成具體項目代碼前,需要將相應的文件下載下來。可以使用 download-git-repo 來快速實現。
class WebpackKickoffGenerator extends Generator { // …… _downloadTemplate() { return new Promise((resolve, reject) => { const dirPath = this.destinationPath(this.dirName, ".tmp"); download("alienzhou/webpack-kickoff-template", dirPath, err => { if (err) { reject(err); return; } resolve(); }); }); } // …… }
這里我們使用了this.destinationPath()方法,該方法主要用于獲取路徑。不傳參時返回當前命令行運行的目錄;如果收到多個參數,則會進行路徑的拼接。
此外,如果你細心的話,會發現_downloadTemplate()方法帶了一個下劃線前綴。這是 Yeoman 中的一個約定:Yeoman 執行順序中有個default階段,該階段包含了所有用戶自定義的類方法。但是,如果某些方法你不希望被 Yeoman 的腳手架流程直接調用,而是作為工具方法提供給其他類方法,則可以添加一個下劃線前綴。對于這種命名的方法,則會在default階段被忽略。
2.5. 模版文件拷貝項目模版下載完畢后,下面就可以將相關的目錄、文件拷貝到目標文件夾中。這些都可以在writing階段操作。此時需要遍歷模版中的所有目錄,將所有文件進行模版填充與拷貝。遍歷方式如下:
class WebpackKickoffGenerator extends Generator { // …… _walk(filePath, templateRoot) { if (fs.statSync(filePath).isDirectory()) { fs.readdirSync(filePath).forEach(name => { this._walk(path.resolve(filePath, name), templateRoot); }); return; } const relativePath = path.relative(templateRoot, filePath); const destination = this.destinationPath(this.dirName, relativePath); this.fs.copyTpl(filePath, destination, { dirName: this.dirName }); } // …… }
這里使用了this.fs.copyTpl()方法,它支持文件拷貝,同時還可以指定相應的模版參數,此外,如果出現重名覆蓋情況會在控制臺自動輸出相應信息。
最后,把下載與拷貝整合起來即可完成writing階段。
class WebpackKickoffGenerator extends Generator { // …… writing() { const done = this.async(); this._downloadTemplate() .then(() => { const templateRoot = this.destinationPath(this.dirName, ".tmp"); this._walk(templateRoot, templateRoot); fs.removeSync(templateRoot); done(); }) .catch(err => { this.env.error(err); }); } // …… }2.6. 依賴安裝
到目前,腳手架已經可以幫我們把項目開發所需的配置、目錄結構、依賴清單都準備好了。這時候可以進一步幫開發人員將依賴安裝完畢,這樣腳手架創建項目完成后,開發人員就可以直接開發了。
Yeoman 也提供了this.npmInstall()來方法來實現 npm 包的安裝:
class WebpackKickoffGenerator extends Generator { // …… install() { this.npmInstall("", {}, { cwd: this.destinationPath(this.dirName) }); } // …… }
到這里,腳手架的核心功能就完成了。已經可以使用咱們的這個 generator 來快速創建項目了。很簡單吧~
完整的代碼可以參考 generator-webpack-kickoff。3. 使用腳手架
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109606.html
摘要:在實際開發項目中,有時我們會用到自定義按鈕因為一個項目中,眾多的頁面,為了統一風格,我們會重復用到很多相同或相似的按鈕,這時候,自定義按鈕組件就派上了大用場,我們把定義好的按鈕組件導出,在全局引用,就可以在其他組件隨意使用啦,這樣可以大幅度 在實際開發項目中,有時我們會用到自定義按鈕;因為一個項目中,眾多的頁面,為了統一風格,我們會重復用到很多相同或相似的按鈕,這時候,自定義按鈕組件就...
摘要:代碼整潔之道整潔的代碼不僅僅是讓人看起來舒服,更重要的是遵循一些規范能夠讓你的代碼更容易維護,同時降低幾率。另外這不是強制的代碼規范,就像原文中說的,。里式替換原則父類和子類應該可以被交換使用而不會出錯。注釋好的代碼是自解釋的。 JavaScript代碼整潔之道 整潔的代碼不僅僅是讓人看起來舒服,更重要的是遵循一些規范能夠讓你的代碼更容易維護,同時降低bug幾率。 原文clean-c...
對比內容UCloudStackZStackVMwareQingCloud騰訊TStack華為云Stack優勢總結?基于公有云自主可控?公有云架構私有化部署?輕量化/輕運維/易用性好?政府行業可復制案例輕量化 IaaS 虛擬化平臺?輕量化、產品成熟度高?業內好評度高?功能豐富、交付部署快?中小企業案例多全套虛擬產品及云平臺產品?完整生態鏈、技術成熟?比較全面且健全的渠道?產品成熟度被市場認可,市場占...
摘要:能跨平臺地設置及使用環境變量讓這一切變得簡單,不同平臺使用唯一指令,無需擔心跨平臺問題安裝方式改寫使用了環境變量的常見如在腳本多是里這么配置運行,這樣便設置成功,無需擔心跨平臺問題關于跨平臺兼容,有幾點注意 cross-env能跨平臺地設置及使用環境變量, cross-env讓這一切變得簡單,不同平臺使用唯一指令,無需擔心跨平臺問題 1、npm安裝方式 npm i --save-de...
摘要:引入的模塊引入的使用將打包打包的拆分將一部分抽離出來物理地址拼接優化打包速度壓縮代碼,這里使用的是,同樣在的里面添加 const path = require(path); //引入node的path模塊const webpack = require(webpack); //引入的webpack,使用lodashconst HtmlWebpackPlugin = require(ht...
閱讀 1259·2021-09-22 15:18
閱讀 2589·2021-09-22 15:17
閱讀 2218·2019-08-30 15:55
閱讀 1567·2019-08-30 15:54
閱讀 1032·2019-08-30 13:12
閱讀 619·2019-08-30 13:12
閱讀 1673·2019-08-29 11:33
閱讀 1433·2019-08-26 17:04