随着前端工程化的不断发展，前端开发中使用到的工具也越来越多。其中一个重要的工具就是 Bazel。Bazel 是一个构建工具，支持多语言、多平台，且可以管理复杂的依赖关系。
在前端领域，Bazel 主要用于构建、测试和部署 Web 应用程序。尽管 Bazel 可以在一定程度上帮助我们解决各种问题，但其配置和使用却相对复杂。
为了简化 Bazel 的使用，@bazel/ibazel 出现了。@bazel/ibazel 是一个 npm 包，可以帮助我们在开发过程中使用 Bazel。
安装
要使用 @bazel/ibazel，我们需要先在本地安装 Bazel。
# 安装 Bazel brew install bazel
然后，我们就可以通过 npm 安装 @bazel/ibazel 了。
# 安装 @bazel/ibazel npm install @bazel/ibazel --save-dev
使用
@bazel/ibazel 主要用于帮助我们在开发过程中使用 Bazel。可以帮助我们监视文件更改，并自动重新构建我们的应用程序。
启动
要启动 @bazel/ibazel，我们需要在项目的根目录中运行以下命令。
# 启动 @bazel/ibazel npx ibazel run //path/to/target
其中，//path/to/target 是我们要运行的 Bazel 目标。例如，要启动一个 TypeScript 应用程序，我们可以运行以下命令。
# 启动 TypeScript 应用程序 npx ibazel run //src:app
当然，我们也可以在运行时为应用程序传递参数。例如：
# 传递参数 npx ibazel run //src:app -- --port=8080
监视
@bazel/ibazel 还可以帮助我们监视文件更改，并自动重新构建我们的应用程序。要启用此功能，我们可以在 ibazel.json 中配置。
-- -------------------- ---- -------
-
------- -
------ ------
------- -
---------
------
-------------
-----
-----------
-
--
------ -
------ ------
------- -
---------
------
------------
-----
------------
-----
-------------
-
-
-上述代码中，我们在 dev 脚本中添加了 --watchfs 参数。
现在，当我们运行 npm run dev 时，@bazel/ibazel 将监视文件更改，并自动重新构建我们的应用程序。
示例代码
下面是一个使用 TypeScript 和 React 的示例应用程序：
-- -------------------- ---- -------
-- -----------
------ - -- ----- ---- --------
------ --------- ----- -
----- -------
-
------ ----- ---- --------------- - -- ---- -- -- -
------ ---------- -------------
--
-- -------------
------ - -- ----- ---- --------
------ - -- -------- ---- ------------
------ - --- - ---- --------
----------------
---- ----------------- ---
-------------------------------
--
-- -----------
---------------------------------- -------------
-----------
---- - ----------
---- - ----------- -------------
---- - --------------- -------------------
-------- - ----------------
-
----------
---- - ---------
---- - ---------------
-
--------------
---- - ------
---- - ------------ -----------
-上面的代码中，我们定义了一个 App 组件，并在 index.tsx 中渲染了该组件。在 BUILD.bazel 中，我们使用 ts_library 构建了 app_lib 库，并使用 ts_web_binary 打包了应用程序。最后，在 index.html 中定义了应用程序的入口。
我们可以使用以下命令启动应用程序。
# 启动应用程序 npx ibazel run //src:app -- --port=8080
运行上述命令后，我们可以在浏览器中访问 http://localhost:8080 来查看应用程序。每次修改 App.tsx 或 index.tsx 文件时，@bazel/ibazel 都会自动重新构建应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/bazel-ibazel