BabelJS Babel CLI
BabelJS 带有一个内置的命令行界面，其中 JavaScript 代码可以使用易于使用的命令轻松编译为相应的 ECMA 脚本。我们将在本章中讨论这些命令的使用。
首先，我们将为我们的项目安装 babel-cli。我们将使用 babeljs 来编译代码。
为您的项目创建一个文件夹以使用 babel-cli。
命令
显示
为上述项目创建的Package.json-
让我们运行命令来安装 babel-cli。
babel 6 的包
npm install--save-dev babel-cli
babel 7 的包
npm install--save-dev @babel/cli
显示
我们已经安装了 babel-cli，这里是更新的 package.json-
除此之外，我们还需要安装 babel-preset 和 babel-core。现在让我们看看安装命令。
babel 6 的包
npm install--save-dev babel-preset-env
npm install--save-dev babel-core
babel 7 的包
npm install--save-dev @babel/core
npm install--save-dev @babel/preset-env
这是上述命令的更新 package.json-
由于我们需要编译成我们要编写的 JavaScript 代码来向后兼容，所以我们将其编译成 ECMA Script 5、为此，我们需要指示 babel 寻找预设，即其中的 es 版本编译将完成。我们需要在我们创建的项目的根文件夹中创建一个
.babelrc> 文件，如下所示。
它包含一个具有以下预设细节的 json 对象-
对于 babel 7，.babelrc 如下-
{
"presets":["@babel/env"]
}
我们已经在项目本地安装了 babel。为了在我们的项目中使用 babel，我们需要在 package.json 中指定相同的内容如下-
编译JS文件
现在我们可以编译我们的 JavaScript 文件了。在你的项目中创建一个文件夹 src；在此文件夹中，创建一个名为 main.js 的文件并编写如下所示的 es6 javascript 代码-
命令
输出
在上面的例子中，来自 main.js 的代码在 es5 版本的终端中显示。来自 es6 的箭头函数被转换为 es5，如上所示。我们不会在终端中显示编译后的代码，而是将其存储在不同的文件中，如下所示。
我们在我们的项目中创建了一个文件夹，我们希望将编译后的文件存储在其中。以下是编译输出并将其存储在我们想要的位置的命令。
命令
npx babel src/main.js--out-file out/main_out.js
输出
命令--out-file 中的选项帮助我们将输出存储在我们选择的文件位置。
如果我们希望每次更改主文件时都更新文件，请在命令中添加
--watch 或
-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/ 文件夹中删除了所有文件并将其保留为空。我们将运行该命令并检查 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 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");
};
