Rome 入门简介 — 一款全能型 JavaScript 开发工具链

Isiah_Lin
1,904 阅读6分钟

一个满足你完整网络开发需求的开发环境

使用像 React, Vue, 或者 Angular 这样的前端库来搭建一个现代 JavaScript 项目，你需要配置许多的开发工具，以便运行你的 JavaScript 代码。

你或许已经知道，在 JavaScript 生态中，有大量独立的开发工具可用于各种用途：

  • Webpack 代码打包工具

  • Babel 代码编译工具

  • Jest 代码测试工具

  • NPM or Yarn 包安装、管理工具

  • Prettier 代码格式化工具

  • ESLint 语法规则和代码风格的检查工具

市面上还有更多的工具，如用于 CSS 代码转换的 PostCSS 和用于强制类型检查的 TypeScript。

一个 JavaScript 项目中可添加的工具多得令人精疲力竭，而这也是 Rome 诞生的初衷。

Rome 是一个 JavaScript 工具链，旨在成为涉及 JavaScript 项目开发中方方面面的一体化工具。Rome 的作者是 Sebastian McKenzie，他同时也是 Babel 和 Yarn 的作者。

这一工具仍处于测试阶段，目前只有代码检测功能（linting feature）可以使用。但项目正在积极开发中，计划支持打包、编译、测试、类型检查等功能。

有趣的是，在很大程度上 Rome 是从零开始编写的，没有任何依赖性。其他工具比如 Create React App 需要为你的项目安装和配置 Webpack（及其他），而 Rome 实际上根本用不上它们。这一点是好是坏——由你来决定。

Rome 推出的的时间点也很有意思，它进入了一个与一年前截然不同的生态系统。

随着 Bit 最新版本的发布，对简化和规范网络开发的工具链的需求已经通过新的 ‘Envs’ 功能得到满足。

Component Development Environments | Bit Docs

Envs 是完整的开发环境，配备了编译器、测试器、linter 工具、格式器、文档编辑工具和自身已搭建好的工作流程。

由于 Bit 是关于组件（components）和 组件 驱动的开发，Envs 本身就是组件，支持独立的组件开发，而不仅仅只是支持完整的应用程序。

— 市场上是否还有对 Rome 的需求见仁见智。

Rome 入门

开始使用 Rome 之前，你需要在项目中初始化 Rome 配置，可以通过全局安装 Rome 或使用 NPX 来完成，如下所示：

npm install -g rome
rome init

或者

npx rome init

init命令执行两件事：

  • 生成 .config/rome.rjson 文件，这是 Rome 的配置文件

  • 生成 .editorconfig 文件，为支持 EditorConfig 的编辑器设置缩进规则

Rome 项目配置的具体信息可以在这儿获取，但本教程不需要你进行任何配置。

初始设置完成之后，我们来看看 Rome 的代码检测功能是如何工作的。

Rome 代码检测功能

Rome 的代码检测功能（linting feature）因其能够输出全面的诊断信息，而从其他工具中脱颖而出。用户界面中会出现错误信息，并提供建议使用的修复方法。

为了测试代码检测功能，我们创建一个 index.js 文件，代码如下：

let a,
  b = "Hello";

if (a == b) console.log("Hello World");

现在我们就有了一个准备好的 JavaScript 文件以供检测，运行 rome check 命令，让 Rome 检测代码中存在什么问题。

npx rome check

请注意，你也可以自定义 Rome 扫描待检测文件或目录的数量。

以下的命令行将使 Rome 单独检测 index.js 文件和 source/ 文件夹：

npx rome check index.js source/

Here’s an example of the rome check command output in my Terminal:

下面的例子是在我的终端中执行 rome check 命令后的输出结果：

Example Rome lint diagnostic output

从上面的截图可以看出，Rome 以丰富的格式生成检测报告，显示了文件、行号和代码所违反的语法规则。 FIXABLE 标签代表 Rome 能够提供一个修改方案。

红色的 ✖ 图标用一句话概括了问题，然后是有问题的代码片段。当问题可以被修复而不引起任何进一步的错误时，就会显示 Safe fix。

如果要自动采用修改方案，你可以在命令中添加--apply标志。这与 ESLint 的--fix标志相似。

npx rome check index.js --apply

当你采取了这些修复措施后，Rome 会报出 index.js 文件里还有一个问题：

上面的输出结果显示，虽然 Rome 建议你应该使用严格的等价比较(===)，但它也承认你可以依靠强制类型转换（type coercion）来运行你的代码。

这就是为什么它会判定这样修复代码是不安全的，且在没有你同意的情况下不会应用该修改办法。

Rome 有 --review 功能，允许用户审查并决定如何处理在代码中发现的每个问题。

我们来看看 Rome 的 review 功能是如何处理 index.js 文件的：

npx rome check index.js --review

现在 Rome 会要求你对发现的每一个问题提供处理意见：

Rome allows you to review the problem and apply the right fix

你可以选择直接采用建议的修复方法，或者命令 Rome 忽略这个问题，或者什么都不做。

当你结合使用 Rome 的应用和审查功能，你可以立即将明显无误的修改建议应用到你的代码中，只审查那些需要多加注意的修改意见。

恢复被 Rome 修改过的文件

在修改任何文件之前，Rome 也会保存一份所有文件的副本。如果修改之后产生了另一个错误，你可以撤销修改，而不必依赖 Git commit。

rome recover 命令允许你访问文件副本。

使用 rome recover list 命令可以展示已储存的操作命令：

Rome recover list command output

为确保最低限度的内存使用率，Rome 只会存储最近的 5 条改动文件的指令。

你可以使用 rome recover pop 命令来恢复最近的保存记录。

如果要恢复特定记录的话，可以使用 rome recover apply <id> 命令。<id> 就是长条横线前的那一行（在上面的截图中，<id> 指的就是 1632551973576-check-0 ）。

最后，通过执行 rome recover diff 命令 Rome 也可以为你展示那些已经获得应用的修改：

Rome recover diff command output

大部分 Rome linter 的语法规则都是为了 JavaScript、 TypeScript、 和 React 而编写。 点击 Rome linter 可查看语法规则的完整列表。

总结

Rome 是一个全新的 JavaScript 开发工具，其野心是成为 JavaScript 项目开发时你唯一需要用到的工具。

这感觉像是一个不可能实现的目标，但在尝试了代码检测功能之后，我认为见证 Rome 的发展历程以及它在未来将为 JavaScript 开发者提供什么样别开生面的功能，会是非常有趣的一件事。

Rome linter 的应用、审查和恢复功能非常出色，因为你可以立即对错误明显的代码进行修正，审查可能导致进一步问题的修改意见，并在错误产生之后撤销修改。

无论 Rome 最后是成功还是失败，毫无疑问的是，它会向我们展示在 JavaScript 开发工具领域还有哪些改进的可能。

欲了解更多信息，请查看 Rome GitHub 主页。

avatar
文章
阅读
粉丝