阅读 1945

前端同学的rust入门(一): rust扫盲以及开发环境搭建

前言

著名的前端Vue框架,Next.js发布了最新版,宣布使用了一个新的JS编译工具--swc,来替换掉babel。 swc在功能上几乎与babel一样,具体的对比可以参见swc官网Comparison with babel | swc。只是swc是使用rust实现的,其编译的速度比babel快了10倍不止。

RUST是什么?

rust是一个静态的编译型语言,在语法,机制上都跟C/C++很像。它诞生的时间不久,但是热度很高,被称为网红语言。

RUST适合什么场景以及招聘情况?

RUST的特点就是快,因此非常适合做计算密集型的东西。 在市场上看,已经崛起的公司基本上都是沿用JAVA,后起之秀才愿意使用新技术,因此RUST短期内肯定不会大范围崛起,很难啃下后端JAVA的份额,只有像Go语言这种被字节这么大体量的新公司崛起才可能获取一席之地。
短期看,只会在新赛道打拼,目前看招聘的话,区块链行业对RUST的需求是最大的。

RUST 跟前端有什么关系?

后端的市场RUST很难啃,但是前端就不一样了。前端的工程化,非常依赖Webpack。但是Webpack是JS写的,它的laoder和plugin大多也是使用JS写的。
而JS这种动态的解释性+单线程语言,在性能上是天然不足的。当项目过大时,webpack的热更新,编译都很令人头疼(虽然相比C++的编译其实已经好多了)。随后涌出的esbuild,vite都是在从不同的角度来解决这个大麻烦。其中esbuild就是摒弃了JS,使用了GO这种支持协程的高性能语言。而SWC也是一个类似的思路,只不过它选用了RUST实现。
而我们知道,Webpack的编译主要实际上对文本的处理,这个属于计算密集型。如果我们将各种JS的loader都从JS切到RUST或者GO,那么将带来数十倍的性能优化。SWC只是做了Babel的事情,我认为未来会有更多的类似工具出现的。

另外,Rust 和 webassembly关系密切。WebAssembly现在还是萌芽状态,但是发展很快。WebAssembly对RUST的支持非常友好。webassembly被认为是处理前端性能问题的有效手段,在一些计算密集型的项目中,比如在线文档,云IDE,可视化领域都非常有潜力。

对于目前的前端从业者来说,rust的场景其实不多,可能更多偏向于做一些工具类的东西(但这些工具用node也能完成,只是rust性能好一点)。学一学,搞一些数据采集分析的工具还是很有用的,或者自己好玩写一个前端的loader(一不小心火了呢)。

学习RUST的前置条件

RUST的入门门槛比JS高很多,如果本身JS理解的就不是很深刻,那么其实不建议学习这个。 要求先理解这些概念:

  1. 解释型语言和静态语言的区别
  2. JS在内存上是如何给string,class,number类型分配空间的
  3. GC是什么,会带来哪些问题
  4. 指针是什么

如果以上几个概念,都不是很清晰,那就建议补全一下JS的这些知识,有余力再来学习RUST。

注意!注意!注意!

前端同学如果要学习Rust,要慎重思考一下ROI。
一般情况下,是不太推荐大家来学习的。有这个时间,学习学些webpack,react底层,甚至研究研究CSS都比较好。 如果只是简单的跑一个hello world,意义也不是很大。因此建议大家,要么不学,要么就学的深入一点。
前端日常都是js,而rust是一种完全不同的编程范式,体验一下,或许有不一样的收获。

环境配置

好了,如果你看到这里,那就认为你已经准备好了。我们开始吧~

万事第一步,搭建开发环境。

像node一样,我们需要下载核心库。可以在这里下载: 入门 - Rust 程序设计语言 (rust-lang.org) MAC可以直接使用命令行安装,windows则需要下载安装程序。 在安装过程中,可能会出现失败的情况,不要灰心,多安装几次就好了。(最好是科学上网) RUST 和Node很像,node有node 和npm两个核心。Rust有rustc,以及包管理工具cargo 安装完成之后,输入

cargo --version
rustc --version
复制代码

来确定是否安装成功

第二步,安装必要的编译库

如果你是MAC,就可以跳过这一步。 如果是windows,则需要C++的构建工具集,才能正常的编译rust。可以去微软官网下载vs的安装包,然后安装C++相关的组件即可。

第三步,试一下环境

先后在命令行执行

cargo new hello_cargo //初始化一个示例项目
cd  hello_cargo //进入项目根目录
cargo build  // 编译项目
复制代码

此时应该能在命令行看到类似的语句

Compiling hello_cargo v0.1.0 (file:///projects/hello_cargo) Finished dev [unoptimized + debuginfo] target(s) in 2.85 secs

如果出现了error,fail之类的字样,要排查一下是否是第二步没做好。 此时,执行一下

$ ./target/debug/hello_cargo # 或者在 Windows 下为 .\target\debug\hello_cargo.exe
复制代码

就能看到命令行打印出来的"Hello World"

第四步,配置VSCode调试环境

VSCode配置比较简单,首先使用VSCode打开刚刚初始化的hello项目,它会智能提示安装几个插件:

  1. RUST Rust - Visual Studio Marketplace
  2. rust-analyzer rust-analyzer - Visual Studio Marketplace
  3. CodeLLDB CodeLLDB - Visual Studio Marketplace

其他的可以根据提示酌情安装

插件安装完毕之后,直接F5运行,会提示你配置lunch.json,VSCode会自动生成一个配置。我们删除配置文件中多余的configurations,删的只剩第一个。然后将剩下的配置修改为:

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "lldb",
            "request": "launch",
            "name": "Debug executable 'hello_cargo'",
            "cargo": {
                "args": [
                    "build",
                    "--bin=hello_cargo",
                    "--package=hello_cargo"
                ],
                "filter": {
                    "name": "hello_cargo",
                    "kind": "bin"
                }
            },
            "args": [],
            "program": "${workspaceFolder}/target/debug/hello_cargo",
            "cwd": "${workspaceFolder}"
        }
    ]
}
复制代码

配置结束,可以在源代码中打一个断点,再F5运行一下,看断点是否生效就好啦!

文章分类
前端
文章标签