NPM 包 bazel-sucrase 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 bazel-sucrase？

bazel-sucrase 是一个基于 Bazel 构建工具的 TypeScript 编译工具。它使用了 Sucrase 编译器来进行高效的 JavaScript 编译，并且对 TypeScript 语法进行了支持。bazel-sucrase 通过执行 Bazel 编译规则来自动导入代码和库，并最终生成 JavaScript 代码。

安装 bazel-sucrase

首先，您需要为您的项目安装 Bazel。安装过程可以参考 Bazel 的官方文档：https://docs.bazel.build/versions/master/install.html

安装成功后，您可以打开命令行终端并执行以下命令：

npm install bazel-sucrase --save-dev

以上命令会将 bazel-sucrase 包安装到您的项目中。

配置 bazel-sucrase

在配置 bazel-sucrase 之前，您需要先配置 Bazel 和 TypeScript。如果您的项目已经使用了 TypeScript，那么您可以跳过这一步。如果不清楚如何配置 TypeScript，请参考 TypeScript 的官方文档：https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

在 TypeScript 配置完成后，您需要在工程根目录下创建一个 .bazelrc 文件，并写入以下内容：

build --config=ts_library

以上配置会让 Bazel 来使用 ts_library 来编译 TypeScript 代码。

接着，在您的项目中创建一个 BUILD 文件，假设其路径为 "src/BUILD"，并写入以下内容：

load("@npm_bazel_sucrase//:index.bzl", "sucrase_ts_library")

sucrase_ts_library(
    name = "my_ts_library",
    srcs = glob(["/**/*.ts"]),
    tsconfig = "//src:tsconfig.json",
)

以上配置会定义一个名为 my_ts_library 的构建规则，这个构建规则会将所有的 TypeScript 文件编译成 JavaScript 文件，并输出到相应的目录。

在上述配置中，glob 函数会自动扫描整个项目中的所有 TypeScript 文件，您也可以通过自己指定目录来选择需要编译的文件。

使用 bazel-sucrase

在配置完 bazel-sucrase 后，您可以使用以下命令来编译 TypeScript 代码：

bazel build //src:my_ts_library

使用上述命令会根据您在 BUILD 文件中定义的规则来编译 TypeScript 代码，并将生成的 JavaScript 代码输出到相应的目录中。

示例代码

以下是使用 bazel-sucrase 的示例代码：

index.ts

import { sum } from "./math";

console.log(sum(1, 2, 3));

math.ts

export function sum(...nums: number[]): number {
  return nums.reduce((acc, val) => acc + val, 0);
}

BUILD

load("@npm_bazel_sucrase//:index.bzl", "sucrase_ts_library")

sucrase_ts_library(
    name = "my_ts_library",
    srcs = glob(["/**/*.ts"]),
    tsconfig = "//src:tsconfig.json",
)

.bazelrc

build --config=ts_library

执行编译

bazel build //src:my_ts_library

以上示例代码会输出 6。这个结果是从 math.ts 中的 sum 函数中计算出来的。使用 bazel-sucrase 编译 TypeScript 代码非常容易，您只需要按照上述教程配置和使用即可。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e0fb81d47349e53cf9