在前端开发中，我们经常需要将 ES6 代码转换成 ES5 代码，以兼容更多的浏览器和环境。而 babel 是最常用的工具之一。我们可以自己配置 babel，使用 babel-cli 进行转换，也可以使用一些现成的工具，如 webpack 和 rollup。本文要介绍的是一个可以方便地将修改过的 ES6 代码转换成 ES5 代码的 npm 包：jaybe78-babel-changed。
安装
我们可以直接使用 npm 安装 jaybe78-babel-changed：
--- ------- ---------- ---------------------
使用方法
使用 jaybe78-babel-changed 很简单。我们先来看看它的命令行用法：
--- ---------- -----------
其中，inputDir 表示源代码目录，outputDir 表示转换后的代码目录。我们可以在命令行中输入：
--- ---- -----
这样，jaybe78-babel-changed 就会将 src/ 目录下所有已修改的文件转换成 ES5 代码，并输出到 dist/ 目录中。而对于没有修改的文件，jaybe78-babel-changed 会直接从 src/ 目录复制到 dist/ 目录。
除了命令行用法，jaybe78-babel-changed 还可以在 Node.js 中使用：
----- --- - --------------------------------- ------------- -----------
配置
jaybe78-babel-changed 也支持一些配置项：
include
表示哪些文件需要被转换，默认为 ['**/*.js']。
------------- ---------- - -------- ----------- ------------ ---
exclude
表示哪些文件不需要被转换，默认为 ['node_modules']。
------------- ---------- - -------- ---------------- ------------ ---
babelrc
表示 babel 配置文件的路径，默认为 '.babelrc'。
------------- ---------- - -------- -------------------- ---
presets 和 plugins
表示 babel 的 presets 和 plugins 配置项。具体可以参考 babel 的文档。
------------- ---------- - -------- ---------------------- -------- -------------------------------------------- ---
示例
假设我们有一个源代码目录 src/，其中有一个 main.js 文件：
----- --- - --- -- -- - - -- ------------------ ----
我们使用 jaybe78-babel-changed 将其转换成 ES5 代码：
--- ---- -----
得到的 dist/main.js 文件内容为：
---- -------- --- --- - -------- ------ -- - ------ - - -- -- ------------------ ----
总结
通过 jaybe78-babel-changed，我们可以轻松地将修改过的 ES6 代码转换成 ES5 代码，从而方便地兼容更多的浏览器和环境。在实际项目中，我们可以将 jaybe78-babel-changed 集成到自己的构建工具中，以自动化转换过程。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668ebd9381d61a3540c29