摘要:之后,在本地目錄生成代碼并且安裝項目依賴的包,最后將本次初始化生成的所有代碼自動提交到遠程倉庫。按照城市評選,分別評選明日之子僅限男性參加和閃亮女神僅限女性參加。
</>復制代碼
背景: 隨著開發團隊規模不斷發展壯大,在人員增加的同時也帶來了協作成本的增加,業務項目越來越多,類型也各不相同。常見的類型有組件類、活動類、基于React+redux的業務項目、RN項目、Node.js項目等等。如果想要對每個項目進行一些規范的約束比如Git提交規范、Javascript規范簡直難于登天。所有的這些,只因為缺少一個好用的工程化工具。從項目創建、開發、構建、代碼規范檢查到最終項目上線,通過CLI可以提升效率,同時保障開發規范的實施。
Node.js實現CLI的基本原理
關鍵點在于package.json里面的bin字段。模塊全局安裝,對于類unix系統,在/usr/local/bin目錄創建軟鏈接;對于windows系統,在C:UsersusernameAppDataRoaming
pm目錄創建軟鏈接。
模塊局部安裝,會在項目內的./node_modules/.bin目錄創建軟鏈接。
隨著前端工程的不斷演進,一方面工程變得日趨復雜,同時對規范和質量的訴求在不斷增加。現代化web工程應該包含以下幾個階段:初始化、開發、構建、檢查、發布。如下圖所示:
痛點1:項目拷貝項目拷貝存在的問題顯而易見,大致有以下三個方面:
容易出錯;一旦某個關鍵文件拷貝丟失或者錯誤,很可能需要耗費半天到一天的時間排查環境問題。
不同場景下對目錄結構要求不同;平時開發過程中,工程通常會分為運營活動、Hybrid業務、入口級別的項目(對性能和體驗有極致和苛刻的要求)。需要基于RN或者Node.js的首屏直出,還有常用的業務組件等的開發。
新的Feature和BugFix難以同步;某個同學開發過程中增加的新方法或者解決的bug很難傳遞給其它同學并且沉淀成經驗積累下來。
社區里面提供了完美的Yeoman解決方案,它是為了自動化項目的創建而生。Yeoman創建項目包括以下幾個階段:
initializing: 初始化一些狀態之類的,通常是和用戶輸入的 options 或者 arguments 打交道
prompting: 和用戶交互的時候(命令行問答之類的)調用
configuring: 保存配置文件(如 .babelrc 等)
writing: 生成模板文件
install: 安裝依賴
end: 結束部分,初始代碼自動提交
我們只需要繼承Yeoman的Generator類做模板定制化,基于Yeoman的腳手架設計思路應該如下圖所示:
首先,開發者會和CLI進行交互,開發者會告訴CLI需要創建哪一種類型的項目,CLI收到命令后。從本地已經安裝的Yeoman腳手架里面選擇某種類型的模板。然后,CLI會調用Gitlab API在遠程創建倉庫并且授予開發者master權限。接下來,會根據實際業務場景需要,自動化申請一些打點信息,常見的如離線包id,監控告警id等等。之后,在本地目錄生成代碼并且安裝項目依賴的npm包,最后將本次初始化生成的所有代碼自動提交到遠程Git倉庫。
痛點2:運營配置頻繁修改基于React+redux組件化開發方式中,一個頁面或者webapp是由多個容器組件拼裝后渲染而成。
某個組件通常是由:模板、cgi數據和事件組成。理想情況下,開發和產品和平共處,你可以把一個組件寫成下面這個樣子,比如規則組件:
</>復制代碼
render() {
return (
活動時間:
9月14日~9月30日
活動規則:
1、活動期間,在NOW app上錄制小視頻,上傳成功后即可參賽。
2、根據參賽小視頻獲得的點贊數進行排行。
3、按照城市評選,分別評選“明日之子”(僅限男性參加)和”閃亮女神“僅限女性參加。
);
}
咋一看,上面的寫法沒什么問題。實際確很可能是7、8次的文案修改,甚至對外入口開放后仍然要修改文案或者圖片等靜態數據。然后,你需要走代碼發布流程。
更好的解決思路是:在開發某個業務組件之前,結合以往的經驗,分析哪些靜態數據很可能是需要高頻次的修改。將這些高頻次修改的靜態數據抽離出來,對于萬年不變的數據則沒有必要抽出來。那么,如何將靜態數據動態化呢?
答案是: Schema First , 開發組件之前先設計Schema,通過schema生成一個form表單,達到靜態數據和模板分離。如果使用React開發,可以基于react-jsonschema-form定制。靜態數據和模板分離之后應該如下圖:
痛點3:缺少協作規范此處以Git commit規范為例子進行相關改進介紹。
良好的Git commit規范有以下優勢:
加快Review的流程
根據Commit元數據生成Changelog
后續維護者可以知道feature被添加的原因
此處采用Google angular項目的提交作為參考,整理出Git commit的解決方案:
具體的提交格式要求如下:
</>復制代碼
():
對格式的說明如下:
type代表某次提交的類型,比如是修復一個bug還是增加一個新的feature。所有的type類型如下:
feat: 新增feature
fix: 修復bug
docs: 僅僅修改了文檔,比如README, CHANGELOG, CONTRIBUTE等等
style: 僅僅修改了空格、格式縮進、都好等等,不改變代碼邏輯
refactor: 代碼重構,沒有加新功能或者修復bug
perf: 優化相關,比如提升性能、體驗
test: 測試用例,包括單元測試、集成測試等
chore: 改變構建流程、或者增加依賴庫、工具等
revert: 回滾到上一個版本
一鍵生成Changelog版本日志:
一次血淋淋的生產環境事故:2017年4月13日,騰訊高級工程師小圣在做充值業務時,修改了蘋果iap支付配置,將JSON配置增加了重復的key。代碼發布后,有小部分使用了vivo手機的用戶反饋充值頁面白屏,無法在Now app內進行充值。最后問題定位是:vivo手機使用了系統自帶的webview而沒有使用X5內核,解析JSON時遇到重復key報錯,導致頁面白屏。
分析:現代化的瀏覽器對于JSON里面的重復key會做兼容處理,但是某些老舊的瀏覽器內核并不會,比如此處的vivo手機,導致代碼直接出錯。那么,如何避免類似問題再次出現呢?
此處不得不提及ESLint,ESLint于2013年6月推出最新版本v4.6.0,是一款適用于Javascript和JSX的代碼規范檢查工具,相比JSLint和JSHint而言,它更加靈活,支持自定義配置、插件擴展和配置錯誤級別。雖然接入ESLint會給團隊的同學增加不少代碼修改的成本,但是從長遠來看,收益肯定是大于付出的。
Javascript規范制定的原則:
不重復造輪子,基于eslint:recommend 配置并改進
能夠幫助發現代碼錯誤的規則,全部開啟
配置不應該依賴于某個具體項目,而應盡可能的合理
幫助保持團隊的代碼風格統一,而不是限制開發體驗
有對應的解釋文檔
為了更好的定制和維護Javascript規范,我們創建了eslint的shareable config。一方面,我們覺得eslint:recommend 里面的部分配置定義的錯誤級別過于嚴格,比如代碼里面出現了console會導致校驗錯誤,另一方面,它沒有包含ESLint的最佳實踐和其它規則。我們定義的部分規則解釋如下:
規則名稱 | 錯誤級別 | 說明 |
---|---|---|
for-direction | error | for 循環的方向要求必須正確 |
getter-return | error | getter必須有返回值,并且禁止返回值為undefined, 比如 return; |
no-await-in-loop | off | 允許在循環里面使用await |
no-console | off | 允許在代碼里面使用console |
no-prototype-builtins | warn | 直接調用對象原型鏈上的方法 |
valid-jsdoc | off | 函數注釋一定要遵守jsdoc規則 |
no-template-curly-in-string | warn | 在字符串里面出現{和}進行警告 |
accessor-pairs | warn | getter和setter沒有成對出現時給出警告 |
array-callback-return | error | 對于數據相關操作函數比如reduce, map, filter等,callback必須有return |
block-scoped-var | error | 把var關鍵字看成塊級作用域,防止變量提升導致的bug |
class-methods-use-this | error | 要求在Class里面合理使用this,如果某個方法沒有使用this,則應該申明為靜態方法 |
complexity | off | 關閉代碼復雜度限制 |
default-case | error | switch case語句里面一定需要default分支 |
ESLint的執行可以接入到PUSH hook里面,步驟如下:
</>復制代碼
#1, 安裝husky
$ npm install husky --save-dev
#2, 集成進npm script
{
"scripts": {
"precommit": "validate-commit-msg",
"prepush": "eslint src ./.eslintrc.js --ext ".js,.jsx""
}
}
CLI設計
CLI的作用是將工程開發過程中遇到的一系列痛點問題連接起來,提升開發效率,同時保障規范的實施。
插件設計 插件實現原理這里有一個非常巧妙的設計,通過使用node提供的module和vm模塊,可以通注入feflow全局變量來訪問到cli的實例。從而能夠訪問cli上的各種屬性,比如config, log和一些helper等。
</>復制代碼
loadPlugin(path, callback) {
const self = this;
return fs.readFile(path).then((script) => {
const module = new Module(path);
module.filename = path;
module.paths = Module._nodeModulePaths(path);
function require(path) {
return module.require(path);
}
require.resolve = function(request) {
return Module._resolveFilename(request, module);
};
require.main = process.mainModule;
require.extensions = Module._extensions;
require.cache = Module._cache;
// Inject feflow variable
script = "(function(exports, require, module, __filename, __dirname, feflow){" +
script + "});";
const fn = vm.runInThisContext(script, path);
return fn(module.exports, require, module, path, pathFn.dirname(path), self);
}).asCallback(callback);
}
命令注冊:
命令需要以feflow.cmd.register進行注冊,比如:
</>復制代碼
feflow.cmd.register("deps", "Config ivweb dependencies", function(args) {
console.log(args);
// Plugin logic here.
});
說明:
register有3個參數,第一個是子命令名稱,第二個是命令描述說明信息,第三個是對應的子命令執行邏輯函數。
feflow會將命令行參數args解析成Object對象,傳遞給插件處理函數
配置可以通過feflow.version獲取當前feflow的版本,feflow.baseDir 獲取feflow跟目錄(在用戶目錄下的.feflow),通過feflow.pluginDir 獲取插件目錄
日志通過feflow.log來進行相關命令行日志輸出
</>復制代碼
const log = feflow.log;
log.info() ? // 提示日志,控制臺中顯示綠色
log.debug() ? // 調試日志, 命令行增加--debug可以開啟,控制臺中顯示灰色
log.warn() ? // 警告日志,控制臺中顯示黃色背景
log.error() ? // 錯誤日志,控制臺中顯示紅色
log.fatal() ? // 致命錯誤日志,,控制臺中顯示紅色
最后
感謝OSC源創匯提供的交流機會,能和廣大開發者分享和交流學習,CLI源代碼托管在Github和碼云上:
Github主頁:https://github.com/cpselvis/f...
碼云主頁:https://gitee.com/cpselvis/fe...
附件:本次分享PPT
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/88690.html
摘要:前端日報精選如何提升頁面渲染效率萌新不知道的件事為什么這么難學中文在下的工程化體系實踐成都源創會分享總結掘金真實點餐項目實戰前端面試之篇個人文章拆分與解耦是敏捷與精益的核心英文 2017-10-06 前端日報 精選 如何提升頁面渲染效率CSS萌新不知道的5件事CSS 為什么這么難學?Learn JavaScript: Logical AND / OR / NOTModern ES6+ ...
摘要:也能幫你寫代碼了微軟和團隊一起推出擴展,預覽版可以在插件市場直接查找安裝。微軟宣布將采用內核這對于諸多的前端開發者而言,無疑是本年底最大的福音具體的計劃可以參考官網的博客,在不久的將來,基于的瀏覽器將要正式和我們見面啦。 訂閱 / 投稿:https://github.com/txd-team/monthly本期小編:?Hkmu (扶容)?/?x-cold (尹摯) 新聞快報 npm ...
摘要:也能幫你寫代碼了微軟和團隊一起推出擴展,預覽版可以在插件市場直接查找安裝。微軟宣布將采用內核這對于諸多的前端開發者而言,無疑是本年底最大的福音具體的計劃可以參考官網的博客,在不久的將來,基于的瀏覽器將要正式和我們見面啦。 訂閱 / 投稿:https://github.com/txd-team/monthly本期小編:?Hkmu (扶容)?/?x-cold (尹摯) 新聞快報 npm ...
摘要:也能幫你寫代碼了微軟和團隊一起推出擴展,預覽版可以在插件市場直接查找安裝。微軟宣布將采用內核這對于諸多的前端開發者而言,無疑是本年底最大的福音具體的計劃可以參考官網的博客,在不久的將來,基于的瀏覽器將要正式和我們見面啦。 訂閱 / 投稿:https://github.com/txd-team/monthly本期小編:?Hkmu (扶容)?/?x-cold (尹摯) 新聞快報 npm ...
閱讀 740·2021-11-17 09:33
閱讀 3774·2021-09-01 10:46
閱讀 1762·2019-08-30 11:02
閱讀 3292·2019-08-29 15:05
閱讀 1407·2019-08-26 11:39
閱讀 2283·2019-08-23 17:04
閱讀 1983·2019-08-23 15:43
閱讀 1380·2019-08-23 14:12
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要