欲取代絕大多 JavaScript 工具鏈？Rome 嚐鮮

本文差點難產而死。由於總結的過程當中，屢次懷疑本文是對官...javascript

一個包含希臘斯巴達頭盔的羅馬項目 Logo前端

條條大路通 Rome。在 Rome 尚未發佈 NPM 正式版之際。咱們圍繞 JavaScript 工具鏈爲核心點，來看看前往 Rome 的路上都有什麼；以及 Rome 自己，意味着什麼？java

二月的最後一天，我在爲「開源愛好者月刊」搜尋本月最新的開源項目時，偶遇一個名叫 Rome 的倉庫霸榜，眼前着實一亮。「一個實驗性的 JavaScript 工具鏈」、「包括編譯器、lint、格式化程序、捆綁器、測試框架等」以及「旨在成爲與 JavaScript 源碼處理相關的全部功能的綜合工具」短短几句話展示了一個宏大的目標。如今，是時候入坑瞭解一波並在我的能力範圍內做一個淺要的分享。ios

Rome 由就任於 Facebook 同時是 Babel 和 Yarn 做者的 Sebastian McKenzie 主導開源，開源以前，Rome 基本是他的我的項目，如今 Facebook 願意付薪水讓他潛心開發。截止如今（2020 年 04 月初），Rome 的提交記錄已經從 70+ 到 600+，貢獻者拓展到了 40+ 位，產生了 30+ issues 和 170+ Pull Request。git

此外，或許也能從側面呼應我曾在月刊第三期中收錄的一句關於「創業公司和大公司開源出發點有何不一樣」的話：大公司可能在一個項目的早期便開源，憑藉其號召力但願更多人一塊兒「貢獻」迭代，初創團隊則會在產品相對成熟的時候再開放，但願儘快吸引用戶深度「使用」，注重完善產品在工業環境下的綜合表現。github

正文 & 背景 & 乾貨開始。編程

Rome：從我的項目到 Facebook 新開源

從官網不難看出，Rome 旨在成爲與 JavaScript 源代碼處理相關的全部功能的綜合工具，其中包括「編譯器、Linter、格式化程序、捆綁器、依賴管理器和測試框架」等。Rome 源於對整個項目的擴展範圍一致性的渴望。json

同時，Rome 也來源於 Babel 做者自己對 Babel 的一些不知足而新創，就像 Deno 之於 Node 同樣。後端

本節根據 README.md 和官網首頁的介紹，來以問答形式展現 Rome 的背景和想要達到具體目標。api

0一、Rome 的一些來源？

在計算機科學中只有兩件難事：緩存失效和命名。 ——Phil Karlton

立項來源：由 Babel and Yarn 的做者 Sebastian McKenzie 發起，是 React Native 團隊的一個項目。
名稱來源：因「通向羅馬的全部道路」，「羅馬不是一天建成」和「在羅馬時要像羅馬人同樣」這樣的諺語而得名。這是指整個項目的擴展範圍和對一致性的渴望，它始於一個辦公室玩笑。
Logo 來源：一個古希臘斯巴達頭盔。雖然它不是羅馬字母，也不太相關，但看起來比 Galea （羅馬士兵的頭盔）酷。

0二、Rome 的編碼架構？

在版本控制系統中，monorepo（單聲道存儲庫的音節縮寫）是一種軟件開發策略，其中許多項目的代碼存儲在同一存儲庫中。截至 2017 年，這種軟件工程實踐已有十多年的歷史，但直到最近才被命名。——Monorepo，維基百科

徹底使用 TypeScript 編寫，不多使用鬆散類型。
支持處理 JSX 以及 Flow 和 TypeScript 代碼。
self-hosted，能夠本身編譯本身。
不是現有工具的集合，全部組件都是自定義的，不使用第三方依賴項（對 JavaScript 生態系統進行了從新思考，對整個工具鏈採用了不依賴第三方庫的大膽實現）。
是帶有內部軟件包的 monorepo 架構以便劃定代碼邊界。

0三、Rome 的工做展望？

旨在成爲與 JavaScript 源代碼處理相關的全部功能的綜合工具。
目標是替代許多現有的 JavaScript 工具，但也將提供爲其餘工具提供自身的集成方案，以根據須要隨意使用——例如使用 Rome 編譯器做爲另外一個捆綁程序的插件。
目前關注的領域是 Linter（用於分析源代碼以標記編程錯誤，bug，樣式錯誤和可疑結構的工具），這是將 Rome 變成最容易使用的工具鏈的目標裏阻力最小的一個環節。

微欄：回看 JavaScript 工具鏈

在學習一個工具以前，每每咱們應該先去了解這個工具能夠用來解決什麼樣的問題；一樣的，當咱們遇到一個問題的時候，咱們也應該帶着這個問題去找工具解決。

**——**阿里巴巴集團高級前端工程師葉俊星

成熟的軟件項目必然遵循的良好的開發規範，也擁有屬於自身獨特的軟件開發生命週期，編程實踐只佔整個開發週期的很小一部分。當一個 JavaScript 軟件被創建時一般還會遇到哪些須要解決的問題？這便涉及到了 JavaScript 項目的技術選型，而 JavaScript 生態圈的明星項目數不勝數，如下做一個縱覽，不涉及各個工具的具體使用方式。

JavaScript 工具鏈示意圖

JS 開發環境？有 V八、Node 甚至是 Deno 等；
JS 前端框架？有 Angular、React、Vue、React Native、jQuery 等；
JS 後端框架？有 Nest、Express、Koa 等；
JS 腳手架？有 Vue CLI、Angular CLI、Create React App、Yeoman 等；
JS 轉譯工具？有 Babel 等；
JS 測試工具？圍繞單元測試、集成測試，有 Mocha、Jasmine、Jest、Karma 等；
JS 調試工具？有 Chrome DevTools/Firebug/Webkit inspector 等各大主流瀏覽器、VS Code/WebStorm 等各大編輯器 / IDE 等；
JS 格式規範工具？有 JSLint、JSHint、ESLint、TSLint 等；
JS 接口聯調工具？有 Axios、Fetch 等；
JS 包管理器？有 NPM、Yarn、Bower、PNPM 等；
JS 模塊加載器？有 RequireJS、SystemJS、StealJS、ES Module Loader 等；
JS 任務管理工具？Grunt、Gulp、Webpack 監聽文件變化，自動執行任務；
JS 靜態化支持？有 TypeScript、CoffeeScript、Flow、LiveScript 等；
JS 代碼後處理工具？圍繞混淆器、縮小器、優化器諸多領域有各類各樣的 loader 等；
JS 打包工具？Webpack、Rollup、Parcel、Browserify 等；
JS 模板引擎？有 handlebarsjs、etpl、templatejs 甚至各大前端框架內置的模板語法等；
JS 非 Web 框架？在物聯網、區塊鏈、大數據等領域均有相關庫支持，本文不涉及。
JS 進程管理？有 Forever、PM二、StrongLoop Process Manager 等；
......？甚至編輯器、IDE、CSS 預處理器、代碼託管平臺、團隊開發模式 (純前端、重後端、先後分離)、WebAssembly、Serverless、JS DevOps 等均可以加到項目的技術選型範圍內。

所以能夠看出，技術選型即是針對能讓項目成功運轉各個環節尋找相應的解決方案；工做流（Workflow）是全部解決方案融合後的落實流程；而工具鏈（Toolchain）即是工做流下全部實現方式的彙總，同時一個工具也能表明一個解決方案。

簡而言之，JavaScript 工具鏈即是 JavaScript 工程師在開發過程當中會用到的一系列工具。

淺嘗初試 Rome (v0.0.52)

如今 Rome 並無直接在 Github 上發佈任何版本，但編譯後生成的 rome.json 能夠看出有一個 v0.0.52 的版本號，處於一個很早期的狀態，項目簡介也是「一個實驗性的 JavaScript 工具鏈」。

想要嘗試 Rome，就得從如下步驟逐步展開（因爲 Rome 沒有發佈正式版本，這裏無需過多涉及如何整合在 package.json 的腳本中使用等工程化過程）。

帝國時代裏的羅馬大軍

本章全部 Demo 均在 @hylerrix/demos 的 Rome 文件夾中。

0一、git clone rome

既然 Rome 沒有正式發佈版本，咱們也沒法直接從 NPM 上直接安裝 Rome。現階段，Rome 提供了本地安裝的方式，只須要克隆到本地並本地編譯和本地 NPM 安裝便可使用。

注：安裝 Rome 前請確保本地已正常安裝 Node 和 NPM

0二、rome init

rome init 命令會在當前目錄生成一個 rome.json 文件，使用推薦配置會初始化如下內容：

該文件告訴 Rome 至少應爲 0.0.52 版本，以便與當前項目一塊兒使用。具體使用文檔還在開發中。

0三、rome run index.ts

rome run 命令將運行傳遞給它的任何文件，一般與項目的主文件一塊兒使用。目前仍在開發中，可能沒法正確處理全部源文件。此時咱們爲測試 rome run 成功運行，創建一個 index.ts 和 api.ts 文件，以下。

此時，運行以下命令即可以成功使用：

0四、rome lint index.ts

因爲我真的不喜歡在 JavaScript 應用裏面寫分號，這與主流規範有些不一樣，因此 rome lint 命令恰好派上了用場：rome 默認須要在 JavaScript 語句結尾寫分號。同時在 api.ts 中故意不導出一個 interface 且在 index.ts 中故意將其錯誤導入，重構後的有錯誤 index.ts 和 api.ts 以及 rome lint 後執行過程以下：

rome lint 命令在這裏提示咱們須要加分號並須要在 api.ts 中成功導出 interface。前者可使用 rome lint index.ts --fix 直接來修理（不會在 api.ts 中添加分號）；後者須要手動修理，可是提供了十分完善的友好提示。

0五、rome compile index.ts

rome compile 命令將使用一組默認轉換來編譯文件。因爲在開發中，當前此命令沒有用於指定轉換子集的選項。使用這條命令後，輸出的結果已經沒有了 interface 的存在。

0六、rome parse index.ts

rome parse 命令將解析文件並輸出格式精美的 AST。

0七、Rome 的更多命令

除了官網展現的幾個命令外，從源碼能夠看出還有不少內置的命令正在開發，能夠從 rome --help 中尋找答案。

參考資料

[English] Rome Github Project
[English] Rome, a new JavaScript Toolchain
[English] Rome Official Announcement
[English] Rome Timeline
[English] Facebook Introduces Rome Experimental JavaScript Toolchain
[English] 01: Sebastian McKenzie on Babel and the Road to Rome - The Babel Podcast
前端工具鏈課（一）—— 包管理工具
Rome：Facebook 最新 JS 工具上手

總結 & 訂閱

通過近幾年的蓬勃發展，JavaScript 早已再也不侷限於「前端開發」的領域中。所以本篇寫做的角度並非僅僅之前端開發爲主體探索，而是將 JavaScript 自己抽離出來，這也是本身逐步理清職業發展的一個重要改變。

本文經過學習和寫做分享對 Rome 進行了簡要的瞭解，但這還僅僅是入門。本身對 Babel 自己並不熟，還有不少學習過程當中產生的疑惑都沒法如今進行合適的解答，好比「Rome 和 Babel 的具體異同」、「如何看待 Rome 倉庫使用 Git 跟蹤 Node Modules」、「Rome 替代現有工具或進行集成方案的具體原理」以及「Rome 的打包流程有何特色」等，挖個坑能夠一塊兒交流。

不管最終是否使用 Rome，能引起對 JavaScript 工具鏈的從新思考也會頗有收穫。

最後，感謝你的閱讀，公衆號 (@ningowood) 及配套羣聊歡迎加入，同時歡迎給如期更新了三期，即將支持線上 UI 界面瀏覽並提供更多拓展功能的「開源愛好者月刊（@ningowood/open-source-magazine）」倉庫點個 Star 吧！（Github 很久沒漲粉絲了，也歡迎關注我~）