BabelJS带有内置的命令行界面，其中JavaScript代码可以使用易于使用的命令轻松编译到相应的ECMA脚本.我们将在本章讨论这些命令的使用.
首先，我们将为我们的项目安装babel-cli.我们将使用babeljs来编译代码.
为您的项目创建一个文件夹以使用babel-cli.
npm init
为上述项目创建的Package.json :
让我们运行安装babel-cli的命令.
npm install --save-dev babel-cli
npm install --save-dev @ babel/cli
我们已安装babel-cli和这里是更新的package.json :
除此之外，我们还需要安装babel-preset和babel-core.现在让我们看一下安装命令.
npm install - save-dev babel-preset-env npm install --save-dev babel-core
npm install --save-dev @ babel/core npm install --save-dev @ babel/preset-env
这是上面命令的更新package.json :
由于我们需要编译为我们要编写的JavaScript代码具有向后兼容性，我们将其编译为ECMA Script 5.为此，我们需要指示babel寻找预设，即es版本，其中将进行编译.我们需要在项目的根文件夹中创建一个 .babelrc> 文件，如下所示.
它包含一个json对象，其中包含以下预设详细信息和减号;
{"presets":["env"]}对于babel 7，.babelrc如下 :
{
"presets":["@babel/env"]
}我们已在项目本地安装了babel.为了在我们的项目中使用babel，我们需要在package.json中指定相同的内容如下 :
现在我们已准备好编译我们的JavaScript文件.在项目中创建一个文件夹src;在此文件夹中，创建一个名为main.js的文件，并编写一个es6 javascript代码，如下所示 :
npx babel src/main.js
在上面的例子中，main.js中的代码显示在es5版本的终端中.来自es6的箭头函数转换为es5，如上所示.我们不会在终端中显示已编译的代码，而是将其存储在不同的文件中，如下所示.
我们在项目中创建了一个名为out的文件夹，其中，我们需要编译的文件要存储.以下是将输出编译并存储到我们想要的位置的命令.
npx babel src/main.js --out-file out/main_out.js
命令--out-file中的选项帮助我们将输出存储在我们选择的文件位置./p>
如果我们每次更改主文件时都希望更新文件，请添加 - 观察或 -w 选项命令如下所示.
npx babel src/main.js --watch - -out-file out/main_out.js
您可以对主文件进行更改;此更改将反映在已编译的文件中.
在上述情况下，我们更改了日志消息， - watch 选项会一直检查是否有任何更改，编译文件中添加了相同的更改.
在前面的部分中，我们学习了编译单个文件.现在，我们将编译一个目录并将编译后的文件存储在另一个目录中.
在src文件夹中，我们将再创建一个名为 main1.js 的js文件.目前，src文件夹有2个javascript文件 main.js 和 main1.js .
以下是文件中的代码 :
main.js
var arrowfunction = () => {
console.log("Added changes to the log message");
}main1.js
var handler = () => {
console.log("Added one more file");
}以下命令将编译 src 文件夹中的代码并将其存储在out/文件夹中.我们已从 out/文件夹中删除了所有文件，并将其保留为空.我们将运行命令并检查输出/文件夹中的输出.
npx babel src --out-dir out
我们在out文件夹中有2个文件 - main.js和main1.js
main.js
"use strict";
var arrowfunction = function arrowfunction() {
console.log("Added changes to the log message");
};main1.js
"use strict";
var handler = function handler() {
console.log("Added one more file");
};接下来，我们将执行下面给出的命令，使用babeljs将这两个文件编译成单个文件.
npx babel src --out-file out/all.js
"use strict";
var arrowfunction = function arrowfunction() {
console.log("Added changes to the log message");
};
"use strict";
var handler = function handler() {
console.log("Added one more file");
};如果我们想忽略某些文件的编译，我们可以使用选项--ignore，如下所示.
npx babel src --out-file out/all.js --ignore src/main1.js
all.js
"use strict";
var arrowfunction = function arrowfunction() {
console.log("Added changes to the log message");
};我们可以使用在文件编译期间使用的插件选项.要使用插件，我们需要安装它，如下所示.
npm install --save-dev babel-plugin-transform-exponentiation-operator
expo.js
let sqr = 9 ** 2; console.log(sqr);
npx babel expo.js --out-file expo_compiled.js --plugins=babel-plugin-transform-exponentiation-operator
"use strict"; var sqr = Math.pow(9, 2); console.log(sqr);
我们也可以在命令中使用预设，如下所示.
npx babel --no-babelrc src/main.js --out-file main_es5.js --presets=es2015
为了测试上述情况，我们从.babelrc中删除了预设选项.
main.js
var arrowfunction = () => {
console.log("Added changes to the log message");
}main_es5.js
"use strict";
var arrowfunction = function arrowfunction() {
console.log("Added changes to the log message");
};我们也可以从命令行忽略.babelrc，如下所示 :
npx babel --no-babelrc src/main.js --out-file main_es5.js --presets=es2015
要测试以上内容例如，我们已经将预设添加回.babelrc，由于我们在命令中添加了--no-babelrc，因此会被忽略. main_es5.js文件详细信息如下 :
main_es5.js
"use strict";
var arrowfunction = function arrowfunction() {
console.log("Added changes to the log message");
};
