用 Rust 构建你自己的 JavaScript 运行时

wzkMaster2023-08-02 23:02

原文链接: deno.com/blog/roll-y...

原文作者：Bartek Iwańczuk

为了大家能够读的更爽，本文全部由本人手工翻译而成，没有任何机翻内容，如果大家有收获的话，还请多多点赞收藏支持～

在这篇文章中我们将创建一个自定义的 JavaScript 运行时，我们就叫它 runjs 吧！可以把它认为是一个简化版的 deno（一个类似于 node 的 JS 运行时）我们的目标是创建一个 CLI（命令行程序），它能够执行本地 JavaScript 文件，与文件系统交互（读取文件、写入文件、删除文件），并且有一个简化版的 console API。

前置要求

这篇教程需要读者掌握以下内容：

  • 基本的 Rust 知识
  • 对 JavaScript 事件循环的基本了解

确保你的电脑上已经安装了 Rust（以及 cargo，Rust 的包管理器），其版本不能低于 1.62.0。访问 rust-lang.org 来安装 Rust 编译器和 cargo。

运行下面这行命令来确保我们能够继续前进：

scss 复制代码 
$ cargo --version
cargo 1.62.0 (a748cf5a3 2022-06-08)

Hello, Rust!

首先，我们来创建一个新的 Rust 项目，初始化一个名叫 runjs 的二进制包。

java 复制代码 
$ cargo init --bin runjs
     Created binary (application) package

进入 runjs 文件夹并在你的编辑器中打开它。运行 cargo run 来确认我们正确地初始化了项目。

ruby 复制代码 
$ cd runjs
$ cargo run
   Compiling runjs v0.1.0 (/Users/ib/dev/runjs)
    Finished dev [unoptimized + debuginfo] target(s) in 1.76s
     Running `target/debug/runjs`
Hello, world!

如果一切顺利的话，我们就可以开始创建我们自己的 JavaScript 运行时了！

依赖安装

接下来，我们添加 deno_core 和 tokio 依赖包到项目中。

css 复制代码 
$ cargo add deno_core
    Updating crates.io index
      Adding deno_core v0.142.0 to dependencies.
$ cargo add tokio --features=full
    Updating crates.io index
      Adding tokio v1.19.2 to dependencies.

更新后的 Cargo.toml 文件应该长这样子：

toml 复制代码 
[package]
name = "runjs"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
deno_core = "0.142.0"
tokio = { version = "1.19.2", features = ["full"] }

deno_core 由 Deno 团队创建，用于抽象简化与 V8 JavaScript 引擎之间的交互。V8 是一个包含了数千个 API 的复杂项目，为了让大家能够更方便地使用它，deno_core 提供了一个 JsRuntime 结构体，其中封装了一个 V8 引擎实例（它叫 Isolate）并提供了整合事件循环的能力。

tokio 是一个异步的 Rust 运行时，我们将用它来作为事件循环。 Tokio 将负责与操作系统的交互，如文件读写、网络访问等。tokio 和 deno_core 让我们能够轻松地将 JavaScript 的 Promise 映射为 Rust 的 Future 。

有了 JavaScript 引擎和事件循环，我们正式开始 JS 运行时的构建。

Hello, runjs!

我们首先编写一个异步的 Rust 函数来创建一个 JsRuntime 实例，它将负责 JS 代码的执行。

rust 复制代码 
// main.rs
use std::rc::Rc;
use deno_core::error::AnyError;

async fn run_js(file_path: &str) -> Result<(), AnyError> {
  let main_module = deno_core::resolve_path(file_path)?;
  let mut js_runtime = deno_core::JsRuntime::new(deno_core::RuntimeOptions {
      module_loader: Some(Rc::new(deno_core::FsModuleLoader)),
      ..Default::default()
  });

  let mod_id = js_runtime.load_main_module(&main_module, None).await?;
  let result = js_runtime.mod_evaluate(mod_id);
  js_runtime.run_event_loop(false).await?;
  result.await?
}

fn main() {
  println!("Hello, world!");
}

这段代码信息量很大：run_js 异步函数创建了一个 JsRuntime 实例，它使用了基于文件系统的模块加载器。随后，我们往 js_runtime 中导入了一个模块，运行它，最后启动了一个事件循环。

run_js 函数封装了整个 JavaScript 代码的运行生命周期。在我们开始正式运行代码之前，得先创建一个单线程的 tokio 运行时来运行我们的 run_js 函数。

rust 复制代码 
// main.rs
fn main() {
  let runtime = tokio::runtime::Builder::new_current_thread()
    .enable_all()
    .build()
    .unwrap();
  if let Err(error) = runtime.block_on(run_js("./example.js")) {
    eprintln!("error: {}", error);
  }
}

现在我们可以来尝试着运行一些 JavaScript 代码了！创建一个 example.js 文件，其功能是打印 Hello runjs!。

js 复制代码 
// example.js
Deno.core.print("Hello runjs!");

这里我们使用了 Deno.core 的 print 函数 - 它是由 deno_core 提供的一个内置全局变量。

现在运行它：

scss 复制代码 
$ cargo run
    Finished dev [unoptimized + debuginfo] target(s) in 0.05s
     Running `target/debug/runjs`
  Hello runjs!⏎

成功了！仅仅用了 25 行 Rust 代码，我们就创建了一个简单的 JavaScript 运行时，它可以执行我们的本地 JS 文件。当然现在这个运行时并没有太多的功能（例如，现在 console.log 是没有效果的，不信你试试！），但我们已经把一个 V8 引擎和 tokio 集成到我们的项目中了。

添加 console API

现在我们来添加 console API。首先，创建 src/runtime.js 文件，这个文件用于实例化 console 对象，使其全局可用。

js 复制代码 
// runtime.js
((globalThis) => {
  const core = Deno.core;

  function argsToMessage(...args) {
    return args.map((arg) => JSON.stringify(arg)).join(" ");
  }

  globalThis.console = {
    log: (...args) => {
      core.print(`[out]: ${argsToMessage(...args)}\n`, false);
    },
    error: (...args) => {
      core.print(`[err]: ${argsToMessage(...args)}\n`, true);
    },
  };
})(globalThis);

console.log 和 console.error 函数接收若干个参数，将这些参数交给 JSON.stringlify 处理（这样我们才能打印对象类型），然后在打印内容之前添加 out 或 error 前缀。这是一种老式的 JS 写法，就像我们在 ES module 出现之前会写的那样。

为了确保我们不会污染全局作用域，我们把代码放在一个立即执行函数（IIFE）中运行。如果我们没有这么做，argsToMessage 函数就会被暴露在全局作用域中。

现在我们把这份代码添加到我们的运行时中，在每次执行代码之前先执行它：

rust 复制代码 
let mut js_runtime = deno_core::JsRuntime::new(deno_core::RuntimeOptions {
  module_loader: Some(Rc::new(deno_core::FsModuleLoader)),
  ..Default::default()
});
// 添加这行
js_runtime.execute_script("[runjs:runtime.js]",  include_str!("./runtime.js")

现在，我们在 example.js 中使用我们的 console API：

js 复制代码 
console.log("Hello", "runjs!");
console.error("Boom!");

再次运行 example.js：

markdown 复制代码 
$ cargo run
    Finished dev [unoptimized + debuginfo] target(s) in 0.05s
     Running `target/debug/runjs`
[out]: "Hello" "runjs!"
[err]: "Boom!"

成功了！现在我们来添加文件系统相关的 API。

添加基础文件系统 API

首先我们更新一下 runtime.js 文件：

js 复制代码 
((globalThis) => {
  // ...
  
  core.initializeAsyncOps();
  globalThis.runjs = {
    readFile: (path) => {
      return core.ops.op_read_file(path);
    },
    writeFile: (path, contents) => {
      return core.ops.op_write_file(path, contents);
    },
    removeFile: (path) => {
      return core.ops.op_remove_file(path);
    },
  };
})(globalThis);

我们添加了一个新的全局对象 runjs ，它有三个方法：readFile，writeFile，removeFile。前两个方法是异步的，最后一个方法是同步的。

你可能会疑惑那些 core.ops.[操作名称] 是什么 - 它们是 deno_core 包提供的绑定 JavaScript 和 Rust 函数的能力。当你调用这些的方法时，deno_core 会寻找拥有 #[op] 属性和对应名称的 Rust 函数进行调用。

我们更新 main.rs 文件来看看效果：

rust 复制代码 
// ...
use deno_core::op;
use deno_core::Extension;
#[op]
async fn op_read_file(path: String) -> Result<String, AnyError> {
    let contents = tokio::fs::read_to_string(path).await?;
    Ok(contents)
}

#[op]
async fn op_write_file(path: String, contents: String) -> Result<(), AnyError> {
    tokio::fs::write(path, contents).await?;
    Ok(())
}

#[op]
fn op_remove_file(path: String) -> Result<(), AnyError> {
    std::fs::remove_file(path)?;
    Ok(())
}
// ...

我们添加了三个可以在 JavaScript 中调用的操作。但要想让这些操作能够被 JavaScript 调用，我们还需要通过注册一个 Extension 来让 deno_core 知道这些操作函数。

rust 复制代码 
async fn run_js(file_path: &str) -> Result<(), AnyError> {
  let main_module = deno_core::resolve_path(file_path)?;
  let runjs_extension = Extension::builder()
      .ops(vec![
          op_read_file::decl(),
          op_write_file::decl(),
          op_remove_file::decl(),
      ])
      .build();
  let mut js_runtime = deno_core::JsRuntime::new(deno_core::RuntimeOptions {
      module_loader: Some(Rc::new(deno_core::FsModuleLoader)),
      extensions: vec![runjs_extension],
      ..Default::default()
  });
  
  // ...
}

Extension 让你能够配置你的 JsRuntime 实例，将不同的 Rust 函数暴露给 JavaScript，同时你还能进行一些更高级的操作，例如加载额外的 JavaScript 代码。

让我们再更新一下 example.js：

js 复制代码 
console.log("Hello", "runjs!");
console.error("Boom!");

const path = "./log.txt";
try {
  const contents = await runjs.readFile(path);
  console.log("Read from a file", contents);
} catch (err) {
  console.error("Unable to read file", path, err);
}

await runjs.writeFile(path, "I can write to a file.");
const contents = await runjs.readFile(path);
console.log("Read from a file", path, "contents:", contents);
console.log("Removing file", path);
runjs.removeFile(path);
console.log("File removed");

运行它：

csharp 复制代码 
$ cargo run
   Compiling runjs v0.1.0 (/Users/ib/dev/runjs)
    Finished dev [unoptimized + debuginfo] target(s) in 0.97s
     Running `target/debug/runjs`
[out]: "Hello" "runjs!"
[err]: "Boom!"
[err]: "Unable to read file" "./log.txt" {"code":"ENOENT"}
[out]: "Read from a file" "./log.txt" "contents:" "I can write to a file."
[out]: "Removing file" "./log.txt"
[out]: "File removed"

太棒了，我们的 runjs 运行时现在可以和文件系统进行交互了！我们只用了寥寥数行代码就让 JavaScript 拥有了调用 Rust 函数的能力 - deno_core 帮我们处理了两种编程语言之间数据转换和通信的问题，我们不需要自己手动处理这些麻烦。

总结

在这篇文章中，我们创建了一个 Rust 项目，将一个强大的 JavaScript 引擎（V8）和一个高性能的事件循环库（tokio）集成在一起，从而构建了一个简单的自定义 JavaScript 运行时。

相关推荐
逆旅行天涯11 分钟前
【Threejs】从零开始（六）--GUI调试开发3D效果
前端·javascript·3d
长风清留扬1 小时前
小程序毕业设计-音乐播放器+源码（可播放）下载即用
javascript·小程序·毕业设计·课程设计·毕设·音乐播放器
m0_748247801 小时前
Flutter Intl包使用指南：实现国际化和本地化
前端·javascript·flutter
ZJ_.2 小时前
WPSJS：让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
joan_852 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
还是大剑师兰特3 小时前
什么是尾调用，使用尾调用有什么好处？
javascript·大剑师·尾调用
Watermelo6173 小时前
详解js柯里化原理及用法，探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
一个处女座的程序猿O(∩_∩)O5 小时前
小型 Vue 项目，该不该用 Pinia 、Vuex呢？
前端·javascript·vue.js
燃先生._.11 小时前
Day-03 Vue（生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤）
前端·javascript·vue.js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04解决java读取EXCEL数据变成科学计数法的问题05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问07DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明106个主流的工业3D管道设计软件