什么是 Babel-cli？
Babel-cli 是 Babel 的命令行工具，用于将 ECMAScript 6+ 代码转换成下一代 JavaScript 标准（ES5 和以下）的工具。它可以在命令行中运行，也可以在 Node.js 中使用。
Babel-cli 的作用
Babel-cli 的主要作用是将 ECMAScript 6+ 代码转换为 ES5 代码，使其可以在不支持 ES6 的浏览器和环境中运行。同时，它还可以转换 JSX 以及其他非标准的语法和特性。
Babel-cli 的安装
- 全局安装 Babel-cli：
npm install -g babel-cli
- 在项目中安装 Babel-cli：
npm install --save-dev babel-cli
Babel-cli 的使用方法
转换单个文件
- 在项目根目录中创建
.babelrc配置文件，设置转换的规则：
{
"presets": ["@babel/preset-env"]
}- 执行命令进行转换：
babel src/index.js -o dist/index.js
其中，src/index.js 是原始文件路径，dist/index.js 是转换后的文件路径。
转换整个目录
配置
.babelrc文件，与转换单个文件相同。执行命令进行转换：
babel src -d dist
其中，src 是原始目录路径，dist 是转换后的目录路径。
转换 Watch 模式
可以使用 Watch 模式来实时转换文件，在文件变化时自动执行转换操作。
执行命令：
babel src -d dist --watch
转换 JSX
在配置 .babelrc 文件中添加 @babel/preset-react，以启用对 JSX 的支持。
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}转换动态导入
在配置 .babelrc 文件中添加 @babel/plugin-syntax-dynamic-import，以启用对动态导入的支持。
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}Babel-cli 的示例代码
转换单个文件示例
原始文件
const sum = (a, b) => a + b; console.log(sum(1, 2));
转换后的文件
"use strict";
var sum = function sum(a, b) {
return a + b;
};
console.log(sum(1, 2));转换整个目录示例
原始文件
src/
index.js
sub/
sub-index.js// index.js
import { add } from './sub/sub-index.js';
console.log(add(1, 2));
// sub/sub-index.js
export const add = (a, b) => a + b;转换后的文件
dist/
index.js
sub/
sub-index.js-- -------------------- ---- ------- -- -------- ---- -------- --- --------- - ------------------------------ --------------- ----------------- ---- -- ---------------- ---- -------- ------------------------------ ------------- - ------ ---- --- ----------- - ---- -- --- --- - -------- ------ -- - ------ - - -- -- ----------- - ----
总结
Babel-cli 是一个非常有用的工具，可以将 ECMAScript 6+ 代码转换为 ES5 代码，使其可以在不支持 ES6 的浏览器和环境中运行。掌握 Babel-cli 的使用对于前端开发者来说至关重要，希望本文能够对读者提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649c197c48841e98948e4bd3