深入罗马:整理,编译和捆绑

2020年12月30日11:11:06 发表评论 36 次浏览

本文概述

罗马是一个JavaScript工具链, 旨在统一前端开发。我们都知道, 管理许多不同的工具来进行捆绑, 最小化, 美化, 编译等工作是多么困难和棘手。

出于Babel和Yarn背后的相同思想, 并遵循Rust等其他语言已经传播的相同集中化思想, 罗马诞生了, 旨在成为一种多合一的工具。

你可以找到支持的语言的更新列表这里。在撰写本文时, 罗马提供了对JavaScript, TypeScript, JSON, HTML, Markdown和CSS的支持。

支持的罗马语言列表

在本文中, 我们将更深入地研究该工具链, 并通过一些很好的示例来了解它如何针对每个前端开发人员必须解决的最常见任务执行。

设定

它的安装非常简单。你可以从NPM或Yarn安装它。对于本文, 我们选择Yarn作为默认值:

yarn add rome
yarn rome init

但是, 如果要使用NPM, 只需运行以下命令:

npx rome init

这将创建一个新的Rome项目并使用一些文件对其进行初始化(我们将在稍后详细介绍它们)。

这是先前命令执行生成的输出:

新罗马项目

我们为制作了一个自定义演示.
不完全是。点击这里查看.

深入罗马:整理,编译和捆绑1

代码格式

在接下来的几个测试中, 请确保index.js创建的文件及其中的以下内容:

var first=["Log", "Rocket"], second=["Log", "Rocket", "Plus"], both=first.concat(second);document.getElementById("demo").innerHTML=both;

缩进代码是非常必要的。大量的插件和大多数IDE临时提供此功能。罗马也是如此。

通过命令行, 你可以通过单击以下命令来格式化给定文件:

yarn rome format index.js

由于我们是通过Yarn创建项目的, 因此纱命令必须在每个罗马命令的开头添加。

这是JavaScript中一个简单的精简代码段。缩小文件是测试格式命令的好方法, 因为我们希望代码是"未缩小的"。命令结束后, 你可能会看到以下输出:

var first = ["Log", "Rocket"], second = ["Log", "Rocket", "Plus"], both = first.concat(second);
document.getElementById("demo").innerHTML = both;

林亭

罗马绒也许是罗马最有趣和最常用的功能之一。通过非常直观, 清晰的语法, 只需运行以下命令即可显示JavaScript文件的错误列表。罗马皮棉命令。

罗马还保留了当前支持的列表皮棉规则。如果验证规则不适合你, 请确保参考此列表以检查该规则是否存在。

让我们测试一下!以以下代码为例:

function abc() {
console.log("what's going");
}

在这里, 我们有两个明显的问题, 代码缩进和未使用的函数。让我们看看罗马如何通过运行以下命令来分析此代码段:

yarn rome lint

以下是输出:

罗马的皮棉执行输出

每个问题都列为项目符号点, 每个点前面都有一个红色X标志。在我们的代码中, 发现了我们提到的两个问题。

以绿色显示, 你会找到建议的修复程序, 例如适合我们的代码格式console.log().

为了解决这个问题, 罗马给了我们一些不错的选择。我们要研究的第一个是检查适用.

此选项很棒, 因为它允许罗马自动修复罗马非常了解并有信心为我们解决的所有问题。

因此, 运行以下命令:

yarn rome check --apply

罗马将在整个代码库中执行一系列审核。是的, 因为我们只有一个文件, 没关系。但是, 在较大的代码库中, 你必须小心选择仅选择要检查的文件。

为此, 只需将文件名放在检查命令:

yarn rome check index.js --apply

命令完成后, 你可以看到代码已自动格式化。但是, 控制台输出仍然存在问题。

未使用功能问题的可视化

由于罗马找不到解决此问题的安全且自动的方法, 因此它将在控制台上记录错误。

不用担心, 还有另一种方法可以帮助你。这是检查评论.

这也是最安全的选择, 因为它使我们可以选择要修复的方式和问题。因此, 运行以下命令:

yarn rome check --review

完成后, 罗马将针对无法解决的每个问题提示一系列选项。这样, 你可以决定如何解决此修复程序。

解决问题的所有选项

这是非常互动的。只需选择一个选项, 然后按Enter。罗马将始终提供不做任何事情的默认选项, 以防你自己修复。

保持第一个选项处于选中状态, 然后按Enter键。最后, 你可能会看到你的代码已更改:

// rome-ignore lint/js/noUnusedVariables
function abc() {
    console.log("what's going");
}

Rome已自动格式化了代码, 并由于我们的选择, 在函数前添加了注释, 以在以后的lint执行中忽略此验证。

很好, 不是吗?

VS代码扩展

或者, 你可以安装VS代码罗马扩展在保存文件时键入和格式化时出现实时错误。这非常有用, 尤其是在你寻求更高的生产率的情况下。

为此, 请转到VS Extensions Marketplace并搜索罗马。没有太多选择, 因此很容易找到它。

打安装按钮, 它在那里。

安装Rome Extension的屏幕截图

Rome自动在函数名称上显示一条错误消息, 提醒你最近创建的函数的未使用性质。

罗马与代码扩展

这样更好, 因为你可以在编程时看到所有错误。这也是大多数开发人员在选择棉短绒时要寻找的东西。

调用函数后, 错误消失:

function abc() {
    console.log("what's going");
}

abc();

一个TypeScript示例

它也可以与其他类型的文件(例如TypeScript)一起很好地工作。以下面的TypeScript示例为例:

function abc(param) {
console.log("Hello TypeScript")

if (param == "abc") { return true;}

setTimeout(()=>{console.log("timeout!")}, 100)


}

然后, 按纱罗姆检查指数.ts-审查命令, 罗马将显示以下提示。

皮棉问题清单

这次, 我们提出了一个真正的解决方案(而不仅仅是添加了禁止评论)。应用建议后, 以绿色查看代码的状态。

用蓝色显示你输入的代码为何不正确的解释, 以及一些重要的观察信息, 例如修复程序是否安全(以及在什么情况下)。

此外, 罗马每次找到解决问题的好方法时, 都会在问题标题的顶部显示" FIXABLE"一词。

在执行结束时, 代码将如下所示:

// rome-ignore lint/js/noUnusedVariables
function abc(param) {
    console.log("Hello TypeScript");

    if (param === "abc") {
        return true;
    }

    setTimeout(
        () => {
            console.log("timeout!");
        }, 100, );
}

探索其他皮棉规则

让我们以前面的示例为例, 并逐步进行介绍。看下面的代码:

function abc(param) {
const myConst = "abc"
var myVar = "abc"

try { console.log("Hello TypeScript") } catch (e) { e; e = new Exception(); }

if (param == "abc") { return true;}


}

在这里, 放置了一些预想的问题:

  • 已知的, 未使用的功能和参数
  • 常量和变量未使用
  • 在内部重新分配例外抓住块
  • 利用未知/未导入的类(例外)
  • 比较两个字符串使用错误的运算符(==)
  • 代码格式不正确

哇好多让我们看看罗马通过运行罗马检查指数命令。

罗马问题清单

我们已经省略了我们之前见过的皮棉问题, 但是列表比这更大。好吧, 这是证明罗马足够强大以至于在你最喜欢的短绒棉中应得的地方的好方法。

编译中

罗马也会编译你的代码。假设你有一些TypeScript代码, 并希望将其编译为JavaScript:

interface User {
    id: number;
    name: string;
}

class Account {
    id: number;
    name: string;

    constructor(id: number, name: string) {
        this.id = id;
        this.name = name;
    }
}

const user: User = new Account("notlogy", 1);

console.log(user);

这些代码大多数都无法被JavaScript理解, 这意味着在使用之前需要对其进行转换。对于罗马, 只需运行以下命令:

yarn rome compile index.ts

这将是输出:

class Account {
        constructor(id, name) {
                this.id = id;
                this.name = name;
        }
}

const user = new Account("notlogy", 1);

console.log(user);

罗马配置

你可能已经注意到, 当你开始一个新的罗马项目时, 一个名为rome.rjson在下自动生成配置夹。

这是当前内容:

// For configuration documentation see http://romefrontend.dev/#project-configuration
name: "rome"
root: true

第一个属性是你的项目名称, 第二个属性告诉罗马可以搜索嵌套项目为了适用罗马规则, 将现有规则纳入现有规则。

该文件在罗马存储工具链的自定义配置。当你需要调整罗马的行事方式时, 这也是你可能会来的地方。

你可以直接编辑文件, 也可以通过命令行管理配置。例如, 假设你要更改项目名称并将其禁用为根项目。这些是两种操作的等效命令:

yarn rome config set name "notlogy-rome"
yarn rome config disable root

所做的更改将提交给rome.rjson文件。

如果要忽略Lint配置中的某些特定路径或文件扩展名, 只需运行以下命令:

yarn rome config push lint.ignore "*.ts" "/build" "/output"

语法非常直观, 因此现在你的TypeScript文件以及其中的所有内容建立和输出如下文件夹将被Rome linter忽略。这是rome.rjson以上命令后的内容:

// For configuration documentation see http://romefrontend.dev/#project-configuration
name: "notlogy-rome"
lint: {
    ignore: [
        "*.ts"
        "/build"
        "/output"
    ]
}
root: false

捆绑

罗马提供的这项实验功能。由于无意提供向后兼容性, 因此请谨慎使用。

Rome的目标是提供一种方法来代替你的Webpack来为你的应用程序包构建独立的JavaScript捆绑文件。

让我们来index.js例。然后, 运行以下命令:

yarn rome bundle index.js bundle.js

第一个参数与要捆绑的源文件有关, 而第二个参数与目标文件名有关。请提供尚不存在的文件名, 这一点很重要。

在下面, 你可以检查此命令的输出:

生成捆绑文件

请注意, 在bundle.js夹:

  • index.js—这是捆绑文件
  • index.js.map—源图文件
  • bundlebuddy.json—用于生成此捆绑包的所有代码文件的地图(JSON)

生成的分发包文件内容将如下所示:

(function(res) {
    if (typeof module !== "undefined") {
        module.exports = res;
    }
    return res;
})(
(function(global) {
  'use strict';
  // notlogy-rome/index.js
  var ___R$notlogy$rome$index_js = {};
var ___R$$priv$notlogy$rome$index_js$first = ["Log", "Rocket"], ___R$$priv$notlogy$rome$index_js$second = ["Log", "Rocket", "Plus"], ___R$$priv$notlogy$rome$index_js$both = ___R$$priv$notlogy$rome$index_js$first.concat(
            ___R$$priv$notlogy$rome$index_js$second, );
    document.getElementById("demo").innerHTML = ___R$$priv$notlogy$rome$index_js$both;

  return ___R$notlogy$rome$index_js;
})(typeof global !== 'undefined' ? global : typeof window !== 'undefined' ? window : this));
//# sourceMappingURL=index.js.map

总结

罗马才刚刚起步, 但是它的前景足以赢得社会的广泛关注和期望。

罗马还有一些不错的功能仍在测试阶段, 例如测试。这将使开发人员可以对名称在。测试。*模式。当将它们放在一起时, 你可以发现这种环境可以变得多么丰富。你只需要在一个地方进行整理, 编译, 格式化, 捆绑和测试。

确保与官方文档罗马, 看看会发生什么。

你呢?你已经测试过罗马了吗?你怎么认为?

你是否要添加新的JS库以提高性能或构建新功能?如果他们做相反的事情怎么办?

毫无疑问, 前端变得越来越复杂。在向应用程序添加新的JavaScript库和其他依赖项时, 你将需要更多可见性, 以确保用户不会遇到未知问题。

日志火箭是一个前端应用程序监视解决方案, 可让你重播JavaScript错误, 就好像它们发生在你自己的浏览器中一样, 以便你可以更有效地对错误做出反应。

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭无论使用哪种框架, 它都能与任何应用完美配合, 并具有用于记录来自Redux, Vuex和@ ngrx / store的其他上下文的插件。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。 notlogy还监视你的应用程序的性能, 报告诸如客户端CPU负载, 客户端内存使用情况等指标。

自信地建立-免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: