在前端开发中，我们常常需要将我们编写的代码编译为浏览器可读的版本。这时候，Babel 是一个非常不错的选择。但是，每次修改代码后都需要重新运行 Babel 并重新编译代码，这样会大大降低我们的开发效率。因此，我们可以使用 npm 包 @kouhin/babel-watch 来实现自动化编译。下面就来详细介绍一下如何使用该包。
安装
首先，我们需要在本地安装 @kouhin/babel-watch。我们可以使用以下命令来安装：
npm install @kouhin/babel-watch --save-dev
配置
安装完成后，我们需要在项目目录下创建 .babelrc 文件，用于配置 Babel。我们可以以以下配置为例：
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- -
------- ---------
-
--
--
---------- -
---------------------------------
-
-除了 .babelrc 配置外，我们还需要在 package.json 文件中添加一些配置：
"scripts": {
"start": "babel-watch server.js"
},
"babel": {
"sourceMaps": "inline"
}其中，start 命令用于启动 @kouhin/babel-watch，server.js 是我们要编译的文件。babel 配置用于指定使用 inline 模式进行 Source Map。
使用
在配置完成后，我们就可以使用 @kouhin/babel-watch 进行自动化编译了。我们只需要在命令行中使用以下命令：
npm start
启动后，每当我们修改 server.js 文件时，@kouhin/babel-watch 都会自动运行并重新编译 server.js。这样，在开发过程中，我们就可以专注于代码的实现，而不需要手动运行 Babel。
示例代码
最后，附上一些示例代码。假设我们要编写一个简单的 Express 应用：
-- -------------------- ---- ------- -- --------- ----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ---------------- -- -- - -------------------- --- --------- -- ---- -------- ---
通过 @kouhin/babel-watch，我们可以在开发过程中自动编译 server.js，使其支持 ES6 语法：
-- -------------------- ---- ------- -- --------- ------ ------- ---- ---------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ---------------- -- -- - -------------------- --- --------- -- ---- -------- ---
通过以上配置和使用，我们可以大大提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc7967216659e24448c