国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

騰訊IVWEB前端工程化工具feflow思考與實踐

TANKING / 2597人閱讀

摘要:本篇文章主要介紹騰訊團隊從到在工程化的思考和實踐。的全稱是前端工作流,致力于提升研發效率和規范的工程化解決方案。最后騰訊團隊的工程化解決方案已經開源主頁如果對您的團隊或者項目有幫助,請給個支持一下哈

本篇文章主要介紹騰訊IVWEB團隊從0到1在工程化的思考和實踐。feflow的全稱是Front-end flow(前端工作流),致力于提升研發效率和規范的工程化解決方案。愿景是通過feflow,可以使項目創建、開發、構建、規范檢查到最終項目上線的整個過程更加自動化和標準化。

要解決的問題

項目的目錄結構按約定生成

團隊有一套開發規范進行約束

支持多種類型的構建,包括Fis構建和webpack構建

團隊內部的代碼貢獻統計、離線包內置App等

為了解決上述問題,我們于17年2月底開始投入工程化feflow工具的開發和相關規范的制定,目前已經研發出了 feflow 的 CLI 版本,后續會推出 GUI 版本。

架構設計

為了讓 feflow 的具有高可擴展性,我們設計了4層結構,分別是:插件生態、內核層、參數解析器和控制臺。除了貫穿整個開發工作流的基礎命令選擇通過內部插件內置在CLI 的Core里面,其它非必要命令統一通過插件機制進行擴展。

另一方面,為了使得 feflow 能夠適用多種類型的項目。我們開發了多種類型的業務腳手架,如:活動模板、App H5模板、RN模板和業務組件模板。

執行過程

當用戶在控制臺里面輸入某個命令。首先會通過CLI 的參數解析器,將這個命令解析成一個object對象,然后傳遞給CLI 的內核。所有的命令都是通過內核上下文提供的 register 函數 進行注冊的,一方面內核自身會讀取內置插件 注冊的基礎命令,另一方面,內核會讀取本地已經安裝的外部插件注冊的命令。如果找到用戶輸入的命令則開始執行命令對應的回調函數。

基礎命令設計
# 初始化項目
$ feflow init

# 本地開發
$ feflow dev

# 代碼質量檢查
$ feflow lint

# 打包構建
$ feflow build

# 代碼發布
$ feflow publish

# 安裝插件、腳手架等
$ feflow install package

# 配置本地客戶端,如: npm 的源和 proxy
$ feflow config  

前面提到,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() ? // 致命錯誤日志,,控制臺中顯示紅色
安裝

插件開發完成后,可以通過 feflow 提供的 install 命令安裝插件。安裝的插件會放置在本地客戶端 ~/.feflow/node_modules 文件夾下,并且寫入到 ~/.feflow/package.json 中

$ feflow install feflow-plugin-xxx   // 安裝某個插件

之后每次運行命令時,便會從本地加載插件所注冊的命令

全量更新和增量更新

當CLI發布了一個新的版本,可能我們會廢棄掉某些功能或者提供了新功能。這個時候如果用戶依然使用的是舊版本,由于某些服務已經廢棄掉了則會報錯。在這種新舊版本不兼容的情況下,如何強制用戶進行CLI的升級呢?需要在運行命令之前檢查本地的CLI是否和遠程提供的新版本是否兼容。在新舊版本不兼容時,會強制全量更新。如何判斷當前用戶安裝的本地版本和遠程最新版本是否兼容呢?

這里非常巧妙的運用了一下 npm 的 registry機制,每次發布新版本,我們會在 package.json 里面新增一個自定義字段 compatibleVersion,它的值是一個 semver 的版本號。本地檢查時,會讀取本地已經安裝的版本和遠程最新的版本進行比較,看看是否滿足 compatibleVersion 的要求。如果不滿足,則會自動運行 npm install feflow-cli 到最新的版本。

 "configs": {
    "compatibleVersion": ">=0.13.0"
 },

對于插件,采取的是增量更新機制。每個發布到 npm 上的插件的package.json 中同樣會有上面的這個字段,對于本地安裝的不兼容的插件列表,會采取增量更新。

多類型腳手架的架構設計

項目拷貝存在的問題顯而易見,大致有以下三個方面:

容易出錯;一旦某個關鍵文件拷貝丟失或者錯誤,很可能需要耗費半天到一天的時間排查環境問題。

不同場景下對目錄結構要求不同;平時開發過程中,工程通常會分為運營活動、Hybrid業務、入口級別的項目(對性能和體驗有極致和苛刻的要求)。需要基于RN或者Node.js的首屏直出,還有常用的業務組件等的開發。

新的Feature和BugFix難以同步;某個同學開發過程中增加的新方法或者解決的bug很難傳遞給其它同學并且沉淀成經驗積累下來。

社區里面提供了完美的Yeoman解決方案,它是為了自動化項目的創建而生。Yeoman創建項目包括以下幾個階段:

initializing: 初始化一些狀態之類的,通常是和用戶輸入的 options 或者 arguments 打交道

prompting: 和用戶交互的時候(命令行問答之類的)調用

configuring: 保存配置文件(如 .babelrc 等)

writing: 生成模板文件

install: 安裝依賴

end: 結束部分,初始代碼自動提交

我們只需要繼承Yeoman的Generator類做模板定制化,基于Yeoman的腳手架設計思路應該如下圖所示:

當開發者輸入 feflow init 命令時,開發者會告訴CLI需要創建哪一種類型的項目,CLI收到命令后。從本地已經安裝的Yeoman腳手架里面選擇某種類型的模板。然后,CLI會調用Gitlab API在遠程創建倉庫并且授予開發者master權限。接下來,會根據實際業務場景需要,自動化申請一些打點信息,常見的如離線包id,監控告警id等等。之后,在本地目錄生成代碼并且安裝項目依賴的npm包,最后將本次初始化生成的所有代碼自動提交到遠程Git倉庫。

多類型主流構建支持

為了讓feflow 支持多種類型的構建環境,比如 Fis3 和 webpack,或者前不久剛推出的號稱零配置成本的 Parcel 構建。在每個項目的跟目錄會放置一份配置文件,名稱為 feflow.json。它的配置可能是這樣的:

{
    "builderType": "builder-webpack3",
    "builderOptions": {
        "moduleName": "mobile",
        "bizName": "category",
        "minifyHTML": true,
        "minifyCSS": true,
        "minifyJS": true,
        "usePx2rem": true,
        "remUnit": 100,
        "remPrecision": 8,
        "inject": true,
        "port": 8001
    }
}

builderType為構建的npm包,builderOptions為構建的參數配置。

最后

騰訊IVWEB團隊的工程化解決方案feflow已經開源:Github主頁:https://github.com/feflow/feflow

如果對您的團隊或者項目有幫助,請給個Star支持一下哈~

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/107614.html

相關文章

  • 《Node.js在CLI下的程化體系實踐》成都OSC源創會分享總結

    摘要:之后,在本地目錄生成代碼并且安裝項目依賴的包,最后將本次初始化生成的所有代碼自動提交到遠程倉庫。按照城市評選,分別評選明日之子僅限男性參加和閃亮女神僅限女性參加。 背景: 隨著開發團隊規模不斷發展壯大,在人員增加的同時也帶來了協作成本的增加,業務項目越來越多,類型也各不相同。常見的類型有組件類、活動類、基于React+redux的業務項目、RN項目、Node.js項目等等。如果想要對每...

    imingyu 評論0 收藏0
  • webpack4新特性介紹

    摘要:當下最流行的模塊打包器于年月日正式發布版本,代號。從官方的發布日志來看本次大版本更新帶來了很多新特性更新和改善,這將會讓的配置更加簡單。本文,筆者將會全面介紹的新特性及實踐。只支持模塊,目前處于試驗階段。 導語: webpack是一個JS應用打包器, 它將應用中的各個模塊打成一個或者多個bundle文件。借助loaders和plugins,它可以改變、壓縮和優化各種各樣的文件。它的輸入...

    NotFound 評論0 收藏0
  • webpack的編譯&構建

    摘要:的編譯構建上一篇文章詳解中介紹了基于事件流編程,是個高度的插件集合,整體介紹了的編譯流程。本文將單獨聊一聊最核心的部分,編譯構建。的編譯重要的構建節點的構建中總會經歷如下幾個事件節點。 webpack的編譯&構建 上一篇文章webpack詳解中介紹了webpack基于事件流編程,是個高度的插件集合,整體介紹了webpack 的編譯流程。本文將單獨聊一聊最核心的部分,編譯&構建。 web...

    roland_reed 評論0 收藏0
  • 如果想成為一名頂尖的前端,這份書單你一定要收藏!

    摘要:其中負載均衡那一節,基本上是參考的權威指南負載均衡的內容。開發指南讀了一半,就是看這本書理解了的事件循環。哈哈創京東一本騙錢的書。 歡迎大家前往騰訊云+社區,獲取更多騰訊海量技術實踐干貨哦~ 本文由騰訊IVWEB團隊 發表于云+社區專欄作者:link 2014年一月以來,自己接觸web前端開發已經兩年多了,記錄一下自己前端學習路上看過的,以及道聽途說的一些書,基本上按照由淺入深來介紹...

    callmewhy 評論0 收藏0
  • 如果想成為一名頂尖的前端,這份書單你一定要收藏!

    摘要:其中負載均衡那一節,基本上是參考的權威指南負載均衡的內容。開發指南讀了一半,就是看這本書理解了的事件循環。哈哈創京東一本騙錢的書。 歡迎大家前往騰訊云+社區,獲取更多騰訊海量技術實踐干貨哦~ 本文由騰訊IVWEB團隊 發表于云+社區專欄作者:link 2014年一月以來,自己接觸web前端開發已經兩年多了,記錄一下自己前端學習路上看過的,以及道聽途說的一些書,基本上按照由淺入深來介紹...

    Scliang 評論0 收藏0

發表評論

0條評論

TANKING

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<