条条大路通 Rome。在 Rome 还没有发布 NPM 正式版之际。我们围绕 JavaScript 工具链为核心点，来看看前往 Rome 的路上都有什么；以及 Rome 本身，意味着什么？
二月的最后一天，我在为“开源爱好者月刊”搜寻本月最新的开源项目时，偶遇一个名叫 Rome 的仓库霸榜，眼前着实一亮。“一个实验性的 JavaScript 工具链”、“包括编译器、lint、格式化程序、捆绑器、测试框架等”以及“旨在成为与 JavaScript 源码处理相关的所有功能的综合工具”短短几句话展现了一个宏大的目标。现在，是时候入坑了解一波并在个人能力范围内作一个浅要的分享。
Rome 由就职于 Facebook 同时是 Babel 和 Yarn 作者的 Sebastian McKenzie 主导开源，开源之前，Rome 基本是他的个人项目，现在 Facebook 愿意付薪水让他潜心开发。截止现在（2020 年 04 月初），Rome 的提交记录已经从 70+ 到 600+，贡献者拓展到了 40+ 位，产生了 30+ issues 和 170+ Pull Request。
此外，或许也能从侧面呼应我曾在月刊第三期中收录的一句关于“创业公司和大公司开源出发点有何不同”的话：大公司可能在一个项目的早期便开源，凭借其号召力希望更多人一起“贡献”迭代，初创团队则会在产品相对成熟的时候再开放，希望尽快吸引用户深度“使用”，注重完善产品在工业环境下的综合表现。
正文 & 背景 & 干货开始。
Rome：从个人项目到 Facebook 新开源
从官网不难看出，Rome 旨在成为与 JavaScript 源代码处理相关的所有功能的综合工具，其中包括“编译器、Linter、格式化程序、捆绑器、依赖管理器和测试框架”等。Rome 源于对整个项目的扩展范围一致性的渴望。
同时，Rome 也来源于 Babel 作者本身对 Babel 的一些不满足而新创，就像 Deno 之于 Node 一样。
本节根据 README.md 和官网首页的介绍，来以问答形式展示 Rome 的背景和想要达到具体目标。
01、Rome 的一些来源？
在计算机科学中只有两件难事：缓存失效和命名。 ——Phil Karlton
- 立项来源：由 Babel and Yarn 的作者 Sebastian McKenzie 发起，是 React Native 团队的一个项目。
- 名称来源：因“通向罗马的所有道路”，“罗马不是一天建成”和“在罗马时要像罗马人一样”这样的谚语而得名。 这是指整个项目的扩展范围和对一致性的渴望，它始于一个办公室玩笑。
- Logo 来源：一个古希腊斯巴达头盔。虽然它不是罗马字母，也不太相关，但看起来比 Galea （罗马士兵的头盔）酷。
02、Rome 的编码架构？
在版本控制系统中，monorepo（单声道存储库的音节缩写）是一种软件开发策略，其中许多项目的代码存储在同一存储库中。 截至 2017 年，这种软件工程实践已有十多年的历史，但直到最近才被命名。——Monorepo，维基百科
- 完全使用 TypeScript 编写，很少使用松散类型。
- 支持处理 JSX 以及 Flow 和 TypeScript 代码。
- self-hosted，可以自己编译自己。
- 不是现有工具的集合，所有组件都是自定义的，不使用第三方依赖项（对 JavaScript 生态系统进行了重新思考，对整个工具链采用了不依赖第三方库的大胆实现）。
- 是带有内部软件包的 monorepo 架构以便划定代码边界。
03、Rome 的工作展望？
- 旨在成为与 JavaScript 源代码处理相关的所有功能的综合工具。
- 目标是替代许多现有的 JavaScript 工具，但也将提供为其他工具提供自身的集成方案，以根据需要随意使用——例如使用 Rome 编译器作为另一个捆绑程序的插件。
- 目前关注的领域是 Linter（用于分析源代码以标记编程错误，bug，样式错误和可疑结构的工具），这是将 Rome 变成最容易使用的工具链的目标里阻力最小的一个环节。
微栏：回看 JavaScript 工具链
在学习一个工具之前，往往我们应该先去了解这个工具可以用来解决什么样的问题；同样的，当我们遇到一个问题的时候，我们也应该带着这个问题去找工具解决。
——阿里巴巴集团 高级前端工程师 叶俊星
成熟的软件项目必然遵循的良好的开发规范，也拥有属于自身独特的软件开发生命周期，编程实践只占整个开发周期的很小一部分。当一个 JavaScript 软件被建立时通常还会遇到哪些需要解决的问题？这便涉及到了 JavaScript 项目的技术选型，而 JavaScript 生态圈的明星项目数不胜数，以下作一个纵览，不涉及各个工具的具体使用方式。
- JS 开发环境？有 V8、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、PM2、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 文件夹中。
01、git clone rome
既然 Rome 没有正式发布版本，我们也无法直接从 NPM 上直接安装 Rome。现阶段，Rome 提供了本地安装的方式，只需要克隆到本地并本地编译和本地 NPM 安装即可使用。
注：安装 Rome 前请确保本地已正常安装 Node 和 NPM
# 克隆 Rome 项目到本地
$ git clone https://github.com/facebookexperimental/rome
# 命令行进入 Rome 项目
$ cd rome
# 方式一：编译 Rome
$ ./scripts/build-release dist
# 方式二：编译 Rome（Windows 10 的情况下，使用 PowerShell 7）
$ cd rome && node scripts/build-release dist
# 安装编译后的 Rome 到本地全局环境中
$ npm install -g ./dist/
# 现在便可以使用 Rome 了
$ rome # No command specified. Run --help to see available commands.
02、rome init
rome init 命令会在当前目录生成一个 rome.json 文件，使用推荐配置会初始化以下内容：
{
"version": "^0.0.52",
"lint": {
"enabled": true
}
}
该文件告诉 Rome 至少应为 0.0.52 版本，以便与当前项目一起使用。具体使用文档还在开发中。
03、rome run index.ts
rome run 命令将运行传递给它的任何文件，通常与项目的主文件一起使用。目前仍在开发中，可能无法正确处理所有源文件。此时我们为测试 rome run 成功运行，建立一个 index.ts 和 api.ts 文件，如下。
// index.ts
import { getData } from './api'
async function setData () {
const { success, data } = await getData()
console.log('success:', success)
console.log('data:', data)
}
await setData()
// api.ts
export const getData = () => Promise.resolve({
success: true,
data: 'Hello World!'
})
此时，运行如下命令便可以成功使用：
$ rome run index.ts
# ℹ Bundling index.ts
# success: true
# data: 'Hello World!'
04、rome lint index.ts
由于我真的不喜欢在 JavaScript 应用里面写分号，这与主流规范有些不同，所以 rome lint 命令刚好派上了用场：rome 默认需要在 JavaScript 语句结尾写分号。同时在 api.ts 中故意不导出一个 interface 且在 index.ts 中故意将其错误导入，重构后的有错误 index.ts 和 api.ts 以及 rome lint 后执行过程如下：
// 故意错误编写的 index.ts
import { getData } from './api'
async function setData() {
const {success, data} = await getData()
console.log('success:', success)
console.log('data:', data)
}
await setData()
// 故意错误不导出的 api.ts
interface Params {
username: string
token: string
}
export const getData = (params: Params) => Promise.resolve({
success: true,
data: 'Hello World!'
})
$ rome lint index.ts
# index.ts lint/pendingFixes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#
# ✖ Pending fixes
#
# 1 │ + import {getData, Params} from './api.ts';
# │ - import {·getData, Params·} from './api.ts'
# 2 │
# .. │
# 4 │ const param: Params = {
# 5 │ username: 'hylerrix',
# 6 │ + token: 'ningowood',
# 7 │ + };
# 8 │ + const {success, data} = await getData(param);
# 9 │ + console.log('success:', success);
# 10 │ + console.log('data:', data);
# 11 │ }
# 12 │
# 13 │ + await setData();
# 14 │
#
# index.ts:1:18 resolver/unknownExport ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#
# ✖ Couldn't find export Params in api.ts
#
# > 1 │ import { getData, Params } from './api.ts'
# │ ^^^^^^
# 2 │
# 3 │ async function setData() {
#
# ℹ However we found a matching local variable in api.ts. Did you forget to export it?
#
# > 1 │ interface Params {
# │ ^^^^^^
# 2 │ username: string
# 3 │ token: string
#
# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#
# ℹ Fixes available. Run `rome lint --fix` to apply.
# ✖ Found 2 problems
$ rome lint index.ts --fix
# ......
# ✔ 1 file fixed
# ✖ Found 2 problems
rome lint 命令在这里提示我们需要加分号并需要在 api.ts 中成功导出 interface。前者可以使用 rome lint index.ts --fix 直接来修理（不会在 api.ts 中添加分号）；后者需要手动修理，但是提供了十分完善的友好提示。
05、rome compile index.ts
rome compile 命令将使用一组默认转换来编译文件。由于在开发中，当前此命令没有用于指定转换子集的选项。使用这条命令后，输出的结果已经没有了 interface 的存在。
$ rome compile index.ts
# import {getData, Params} from './api';
#
# async function setData() {
# const param = {
# username: 'hylerrix',
# token: 'ningowood',
# };
# const {success, data} = await getData(param);
# console.log('success:', success);
# console.log('data:', data);
# }
#
# await setData();
06、rome parse index.ts
rome parse 命令将解析文件并输出格式精美的 AST。
$ rome parse index.ts
# Program {
# comments: Array []
# corrupt: false
# diagnostics: Array []
# directives: Array []
# filename: 'project-rome/index.ts'
# hasHoistedVars: false
# mtime: 1_586_498_633_476.8486
# sourceType: 'module'
# syntax: Array ['ts']
# body: Array [
# ImportDeclaration {
# source: StringLiteral {value: './api'}
# namedSpecifiers: Array [
# ......
07、Rome 的更多命令
除了官网展示的几个命令外，从源码可以看出还有很多内置的命令正在开发，可以从 rome --help 中寻找答案。
# 分析并输出文件的依赖
$ rome analyzeDependencies index.ts
# 把 JavaScript 打包为一个文件
$ rome bundle index.ts dist
# 启动 Web 服务器
$ rome develop
# 计算文件路径
$ rome resolve index.ts
# 安全依赖，运行 Linter 和测试
$ rome ci
# 运行测试
$ rome test
# ...restart/start/status/stop/web
# ...config/publish/run/evict/logs/rage
总结 & 订阅
经过近几年的蓬勃发展，JavaScript 早已不再局限于“前端开发”的领域中。因此本篇写作的角度并不是仅仅以前端开发为主体探索，而是将 JavaScript 本身抽离出来，这也是自己逐步理清职业发展的一个重要改变。
本文通过学习和写作分享对 Rome 进行了简要的了解，但这还仅仅是入门。自己对 Babel 本身并不熟，还有很多学习过程中产生的疑惑都无法现在进行合适的解答，比如“Rome 和 Babel 的具体异同”、“如何看待 Rome 仓库使用 Git 跟踪 Node Modules”、“Rome 替代现有工具或进行集成方案的具体原理”以及“Rome 的打包流程有何特点”等，挖个坑可以一起交流。
无论最终是否使用 Rome，能引发对 JavaScript 工具链的重新思考也会很有收获。
最后，感谢你的阅读，同时欢迎给如期更新了三期，即将支持线上 UI 界面浏览并提供更多拓展功能的“开源爱好者月刊（@ningowood/open-source-magazine）”仓库点个 Star 吧！（Github 好久没涨粉丝了，也欢迎关注我~）
参考资料
- [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 工具上手
