在前端开发中，我们经常需要将 ES6 代码转换成 ES5 代码，以兼容更多的浏览器和环境。而 babel 是最常用的工具之一。我们可以自己配置 babel，使用 babel-cli 进行转换，也可以使用一些现成的工具，如 webpack 和 rollup。本文要介绍的是一个可以方便地将修改过的 ES6 代码转换成 ES5 代码的 npm 包：jaybe78-babel-changed。
安装
我们可以直接使用 npm 安装 jaybe78-babel-changed：
npm install --save-dev jaybe78-babel-changed
使用方法
使用 jaybe78-babel-changed 很简单。我们先来看看它的命令行用法：
jbc <inputDir> <outputDir>
其中，inputDir 表示源代码目录，outputDir 表示转换后的代码目录。我们可以在命令行中输入：
jbc src/ dist/
这样，jaybe78-babel-changed 就会将 src/ 目录下所有已修改的文件转换成 ES5 代码，并输出到 dist/ 目录中。而对于没有修改的文件，jaybe78-babel-changed 会直接从 src/ 目录复制到 dist/ 目录。
除了命令行用法，jaybe78-babel-changed 还可以在 Node.js 中使用：
const jbc = require('jaybe78-babel-changed');
jbc(inputDir, outputDir);配置
jaybe78-babel-changed 也支持一些配置项：
include
表示哪些文件需要被转换，默认为 ['**/*.js']。
jbc(inputDir, outputDir, {
include: ['**/*.js', '**/*.jsx'],
});exclude
表示哪些文件不需要被转换，默认为 ['node_modules']。
jbc(inputDir, outputDir, {
exclude: ['node_modules', 'coverage'],
});babelrc
表示 babel 配置文件的路径，默认为 '.babelrc'。
jbc(inputDir, outputDir, {
babelrc: './my-babelrc.json',
});presets 和 plugins
表示 babel 的 presets 和 plugins 配置项。具体可以参考 babel 的文档。
jbc(inputDir, outputDir, {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties'],
});示例
假设我们有一个源代码目录 src/，其中有一个 main.js 文件：
const sum = (a, b) => a + b; console.log(sum(1, 2));
我们使用 jaybe78-babel-changed 将其转换成 ES5 代码：
jbc src/ dist/
得到的 dist/main.js 文件内容为：
"use strict";
var sum = function sum(a, b) {
return a + b;
};
console.log(sum(1, 2));总结
通过 jaybe78-babel-changed，我们可以轻松地将修改过的 ES6 代码转换成 ES5 代码，从而方便地兼容更多的浏览器和环境。在实际项目中，我们可以将 jaybe78-babel-changed 集成到自己的构建工具中，以自动化转换过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668ebd9381d61a3540c29