打造你自己的 JavaScript 运行时，第 2 部分

这是第二部分，继打造你自己的 JavaScript 运行时，第 1 部分之后。还有第三部分，我们在其中创建快照以加速启动时间。

更新于 2024-09-26：更新了代码示例，以使用最新版本的 deno_core

您可能想要打造自己的 JavaScript 运行时有很多原因，例如构建一个带有 Rust 后端的交互式 Web 应用程序、通过构建插件系统来扩展您的平台，或者为 Minecraft 编写插件。

在这篇博文中，我们将基于第一篇博文，通过以下方式：

• 实现 fetch,
• 读取作为命令行参数的文件路径以执行，以及
• 支持 TypeScript 和 TSX

观看视频演示或在此处查看源代码。

准备工作

如果您按照第一篇博文，您的项目应该有三个文件：

• example.js：我们打算在自定义运行时中执行的 JavaScript 文件
• main.rs：异步 Rust 函数，它创建 JsRuntime 的实例，该实例负责 JavaScript 执行
• runtime.js：运行时接口，它定义并提供 API，该 API 将与来自 main.rs 的 JsRuntime 互操作

让我们在我们的自定义运行时中实现一个 HTTP 函数 fetch。

实现 fetch

在我们的 runtime.js 文件中，让我们在全局对象 runjs 下添加一个新的函数 fetch

// runtime.js

const { core } = Deno;
const { ops } = 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.runjs = {
  readFile: (path) => {
    return ops.op_read_file(path);
  },
  writeFile: (path, contents) => {
    return ops.op_write_file(path, contents);
  },
  removeFile: (path) => {
    return ops.op_remove_file(path);
  },
+  fetch: (url) => {
+    return ops.op_fetch(url);
+  },
};

现在，我们必须在 main.rs 中定义 op_fetch。它将是一个异步函数，它将接受一个 String 并返回一个 String 或一个错误。

在该函数本身中，我们将使用 reqwest crate，这是一个方便且强大的 HTTP 客户端，并且仅使用 get 函数。

// main.rs

// …

#[op2(async)]
#[string]
async fn op_read_file(#[string] path: String) -> Result<String, AnyError> {
  let contents = tokio::fs::read_to_string(path).await?;
  Ok(contents)
}

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

+ #[op]
+ async fn op_fetch(url: String) -> Result<String, AnyError> {
+   let body = reqwest::get(url).await?.text().await?;
+   Ok(body)
+ }

// …

为了使用 reqwest，让我们从命令行将其添加到我们的项目中

$ cargo add reqwest

接下来，我们将在我们的 runjs 扩展中注册 op_fetch

// main.rs

// …

extension!(
  runjs,
  ops = [
    op_read_file,
    op_write_file,
    op_remove_file,
+    op_fetch,
  ],
  esm_entry_point = "ext:runjs/runtime.js",
  esm = [dir "src", "runtime.js"],
);

// …

让我们更新我们的 example.js，以便我们可以试用新的 fetch 函数

console.log("Hello", "runjs!");
content = await runjs.fetch(
  "https://deno.land/std@0.177.0/examples/welcome.ts",
);
console.log("Content from fetch", content);

我们可以这样运行它

$ cargo run
    Finished dev [unoptimized + debuginfo] target(s) in 2m 14s
     Running `target/debug/runjs`
[out]: "Hello" "runjs!"
[out]: "Content from fetch" "// Copyright 2018-2023 the Deno authors. All rights reserved. MIT license.\n\n/** Welcome to Deno!\n *\n * @module\n */\n\nconsole.log(\"Welcome to Deno!\");\n"

它工作了！我们能够在不到 10 行代码的情况下将我们自定义版本的 fetch 添加到我们的 JavaScript 运行时中。

读取命令行参数

到目前为止，我们已经硬编码了要加载和执行的文件路径。每次我们只需要运行 cargo run 即可运行 example.js 的内容。

让我们将其更新为读取命令行参数，并将第一个参数作为要运行的文件路径。我们可以在 main.rs 的 main() 函数中进行更改

// main.rs

// ...

fn main() {
+  let args: Vec<String> = std::env::args().collect();

+  if args.is_empty() {
+    eprintln!("Usage: runjs <file>");
+    std::process::exit(1);
+  }
  let file_path = &args[1];

  let runtime = tokio::runtime::Builder::new_current_thread()
    .enable_all()
    .build()
    .unwrap();
+  if let Err(error) = runtime.block_on(run_js(file_path)) {
+    eprintln!("error: {error}");
+  }
}

让我们尝试运行 cargo run example.js

$ cargo run example.js
    Finished dev [unoptimized + debuginfo] target(s) in 6.99s
     Running `target/debug/runjs example.js`
[out]: "Hello" "runjs!"
[out]: "Content from fetch" "// Copyright 2018-2023 the Deno authors. All rights reserved. MIT license.\n\n/** Welcome to Deno!\n *\n * @module\n */\n\nconsole.log(\"Welcome to Deno!\");\n"

它工作了！现在我们可以将文件作为命令行参数传递给运行时。

支持 TypeScript

但是，如果我们也想支持 TypeScript 或 TSX 呢？

第一步是将 TypeScript 转译为 JavaScript。

让我们将 example.js 更新为 example.ts 并添加一些简单的 TypeScript

console.log("Hello", "runjs!");

+ interface Foo {
+   bar: string;
+   fizz: number;
+ }
+ let content: string;
content = await runjs.fetch(
  "https://deno.land/std@0.177.0/examples/welcome.ts",
);
console.log("Content from fetch", content);

接下来，我们将必须更新 main.rs 中的模块加载器。我们当前的模块加载器是 deno_core::FsModuleLoader，它提供从本地文件系统加载模块的功能。但是，此加载器只能加载 JavaScript 文件。

// main.rs
// …

  let mut js_runtime = deno_core::JsRuntime::new(deno_core::RuntimeOptions {
    module_loader: Some(Rc::new(deno_core::FsModuleLoader)),
    extensions: vec![runjs::init_ops_and_esm()],
    ..Default::default()

// …

因此，让我们实现一个新的 TsModuleLoader，我们可以在其中根据文件扩展名确定要转译的语言。这个新的模块加载器将实现 deno_core::ModuleLoader trait，因此我们将必须实现 resolve 和 load 函数。

resolve 函数很简单——我们可以简单地调用 deno_core::resolve_import

// main.rs

struct TsModuleLoader;

impl deno_core::ModuleLoader for TsModuleLoader {
  fn resolve(
    &self,
    specifier: &str,
    referrer: &str,
    _kind: deno_core::ResolutionKind,
  ) -> Result<deno_core::ModuleSpecifier, deno_core::error::AnyError> {
    deno_core::resolve_import(specifier, referrer).map_err(|e| e.into())
  }
}

接下来，我们将必须实现 load 函数。这比较棘手，因为将 TypeScript 转译为 JavaScript 并非易事——您需要能够解析 TypeScript 文件，创建抽象语法树，然后去掉 JavaScript 不可理解的可选类型，然后将这棵树折叠回文本文档。

我们不会自己做这件事（因为这可能需要几周的时间才能实现），所以我们将使用 Deno 生态系统中的现有解决方案：deno_ast。

让我们从命令行将其添加到我们的依赖项中

$ cargo add deno_ast

在我们的 Cargo.toml 中，我们还需要将 transpile 作为 deno_ast 的一个功能包含进来

// …
[dependencies]
deno_ast = { version = "0.42", features = ["transpiling"] }
// …

接下来，让我们在 main.rs 的顶部添加四个 use 声明，我们将在 load 函数中需要它们

// main.rs

use deno_ast::MediaType;
use deno_ast::ParseParams;
use deno_core::ModuleLoadResponse;
use deno_core::ModuleSourceCode;

// …

现在我们可以实现我们的 load 函数了

// main.rs

struct TsModuleLoader;

impl deno_core::ModuleLoader for TsModuleLoader {
  // fn resolve() ...

  fn load(
    &self,
    module_specifier: &deno_core::ModuleSpecifier,
    _maybe_referrer: Option<&deno_core::ModuleSpecifier>,
    _is_dyn_import: bool,
    _requested_module_type: deno_core::RequestedModuleType,
  ) -> ModuleLoadResponse {
    let module_specifier = module_specifier.clone();
    let module_load = move || {
      let path = module_specifier.to_file_path().unwrap();

      // Determine what the MediaType is (this is done based on the file
      // extension) and whether transpiling is required.
      let media_type = MediaType::from_path(&path);
      let (module_type, should_transpile) = match MediaType::from_path(&path) {
        MediaType::JavaScript | MediaType::Mjs | MediaType::Cjs => {
          (deno_core::ModuleType::JavaScript, false)
        }
        MediaType::Jsx => (deno_core::ModuleType::JavaScript, true),
        MediaType::TypeScript
        | MediaType::Mts
        | MediaType::Cts
        | MediaType::Dts
        | MediaType::Dmts
        | MediaType::Dcts
        | MediaType::Tsx => (deno_core::ModuleType::JavaScript, true),
        MediaType::Json => (deno_core::ModuleType::Json, false),
        _ => panic!("Unknown extension {:?}", path.extension()),
      };

      // Read the file, transpile if necessary.
      let code = std::fs::read_to_string(&path)?;
      let code = if should_transpile {
        let parsed = deno_ast::parse_module(ParseParams {
          specifier: module_specifier.clone(),
          text: code.into(),
          media_type,
          capture_tokens: false,
          scope_analysis: false,
          maybe_syntax: None,
        })?;
        parsed
          .transpile(&Default::default(), &Default::default())?
          .into_source()
          .source
      } else {
        code.into_bytes()
      };

      // Load and return module.
      let module = deno_core::ModuleSource::new(
        module_type,
        ModuleSourceCode::Bytes(code.into_boxed_slice().into()),
        &module_specifier,
        None,
      );
      Ok(module)
    };

    ModuleLoadResponse::Sync(module_load)
  }
}

让我们稍微解释一下。我们的 load 函数需要接受一个文件路径并返回一个 JavaScript 模块源。文件路径可以指向 JavaScript 或 TypeScript 文件，只要它返回一个转译后的 JavaScript 模块即可。

第一步是获取文件的路径，确定其 MediaType，以及是否需要转译。接下来，该函数将文件读取到字符串中，并在必要时进行转译。最后，代码被转换为 module 并返回。

但是，在我们运行它之前，我们需要在我们创建 JsRuntime 的地方用新定义的 TsModuleLoader 替换 FsModuleLoader

// …

  let mut js_runtime = deno_core::JsRuntime::new(deno_core::RuntimeOptions {
-   module_loader: Some(Rc::new(deno_core::FsModuleLoader)),
+   module_loader: Some(Rc::new(TsModuleLoader)),
    extensions: vec![runjs::init_ops_and_esm()],
    ..Default::default()

// …

这应该是我们使 TypeScript 转译工作所需的一切。

让我们用 cargo run example.ts 运行它，它应该可以工作！

cargo run example.ts
    Finished dev [unoptimized + debuginfo] target(s) in 0.73s
     Running `target/debug/runjs example.ts`
[out]: "Hello" "runjs!"
[out]: "Content from fetch" "// Copyright 2018-2023 the Deno authors. All rights reserved. MIT license.\n\n/** Welcome to Deno!\n *\n * @module\n */\n\nconsole.log(\"Welcome to Deno!\");\n"

（请注意，“工作”意味着在 example.ts 中解析 TypeScript 时没有错误。）

大约 154 行 Rust 代码，我们就能够添加对转译 TypeScript、TSX 以及更多内容的支持。

下一步是什么？

在 Rust 中嵌入 JavaScript 和 TypeScript 是构建交互式、高性能应用程序的好方法。无论是扩展平台功能的插件系统，还是高性能、单一用途的运行时，Deno 都使 JavaScript、TypeScript 和 Rust 之间的互操作变得简单。

您是否正在构建自定义 JavaScript 运行时或在 Rust 中嵌入 JavaScript？请在 Twitter 或 Discord 上告诉我们。