什么是 babili-inplace
Babili-inplace 是一个基于 Babel 的 JavaScript 编译器，它可以将 ES6+ 代码转换为 ES5，同时优化代码以减少文件大小。Babili-inplace 与其他优化编译器不同，它是 In-Place 编译。即不需要生成新文件就可以直接优化源文件。
如何安装 babili-inplace
babili-inplace 可以通过 npm 安装。打开终端，使用以下命令安装：
npm install babili-inplace --save-dev
安装完成后，可以在 package.json 中查看已安装版本信息。
如何使用 babili-inplace
使用 babili-inplace 很简单，只需要在终端中运行以下命令：
npx babili-inplace <input_files>
其中 <input_files> 是要优化的文件，可以是一个文件或者是一个文件夹路径。Babili-inplace 会将输入的 JavaScript 代码直接优化，如果需要输出到新文件，可以使用 --out-file 选项。
npx babili-inplace --out-file ./dist/bundle.js ./src/index.js
输出文件的路径和文件名可以自定义。
如何配置 babili-inplace
Babili-inplace 可以通过配置文件进行自定义配置。在项目根目录中创建 .babili.hjson 文件，并添加如下配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
--------- ----
--
-------- ----
-
-
--
---------- --
-上述配置的意思是使用 @babel/preset-env 预设进行代码转换，同时设置目标浏览器为 Chrome 58，使用松散模式。更多关于 babel 预设和插件的配置信息可以参考 babel 官方文档。
实际应用
以下是一个使用 babili-inplace 的示例代码，用于将 src 文件夹中所有的 ES6+ 代码转换为 ES5，并输出到 dist 文件夹。
-- -------------------- ---- -------
----- - ---- - - -------------------------
--------- -------------- ---------- ------ ----------- ------- ----- ------- ------- -- -
-- ----- -
-------------------
-------
-
--------------------
---在终端中运行以上代码即可快速将项目代码转换为 ES5 代码。
总结
Babili-inplace 是一个非常实用的 JavaScript 优化编译器，能够优化源文件并减少文件大小。学习如何使用它可以让我们更好地理解 JavaScript 编译器的工作原理，并且能够提高我们的代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552dc81e8991b448d046f