BabelJS - Babel CLI

BabelJS - Babel CLI

BabelJS 带有一个内置的命令行界面,其中 JavaScript 代码可以使用的命令轻松编译为相应的 ECMA 脚本。我们将在本文中讨论这些命令的使用。

首先,我们将为我们的项目安装 babel-cli。我们将使用 babeljs 来编译代码。

为您的项目创建一个文件夹以使用 babel-cli。

npm init

为项目创建的 Package.json

让我们运行命令来安装 babel-cli。

Package for babel 6

npm install --save-dev babel-cli

Package for babel 7

npm install --save-dev @babel/cli

我们已经安装了 babel-cli,这里是更新的 package.json

除此之外,我们还需要安装 babel-preset 和 babel-core。现在让我们看看安装命令。

Packages for babel 6

npm install --save-dev babel-preset-env
npm install --save-dev babel-core

Packages for 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 对象

{ "presets": ["env"] }

对于 babel 7,.babelrc 如下

{
   "presets":["@babel/env"]
}

我们已经在项目本地安装了 babel。为了在我们的项目中使用 babel,我们需要在 package.json 中指定相同的内容,如下所示

编译 JS 文件

现在我们准备编译我们的 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 帮助我们将输出存储在我们选择的文件位置。

如果我们希望每次更改主文件时都更新文件,请在命令中添加 --watch 或 -w 选项,如下所示。

npx babel src/main.js --watch --out-file out/main_out.js

您可以对主文件进行更改;此更改将反映在编译文件中。

在上述情况下,我们更改了日志消息,并且 --watch 选项不断检查任何更改,并且相同的更改被添加到编译文件中。

编译后文件

在我们之前的部分中,我们学习了如何编译单个文件。现在,我们将编译一个目录并将编译后的文件存储在另一个目录中。

在 src 文件夹中,我们将再创建一个名为 main1.js 的 js 文件。目前src文件夹有2个javascript文件main.jsmain1.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.jsmain1.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

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);

我们也可以在命令中使用presets,如下图

npx babel src/main.js --out-file main_es5.js --presets=es2015

为了测试上述情况,我们从 .babelrc 中删除了presets选项。

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

为了测试上述情况,我们已经将presets添加回 .babelrc 并且由于我们在命令中添加了 --no-babelrc,同样会被忽略。 main_es5.js文件详情如下

main_es5.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

版权声明:著作权归作者所有。

相关推荐

Angular CLI在Angular项目里使用scss

Angular CLI支持多种css预处理,包括:cssscsslesssassstyl (stylus)默认值为css。Angular有两种方式指定css预处理。下面以scss为例:新建项目指定css预处理在新建angular项目是使用--style指定css预处理ng new my-project --style=scss 已有项目指定css预

撤回Angular CLI执行的ng eject

使用angular cli执行ng eject后,就不允许执行ng server或ng build。执行ng server 或ng build会报一下错误:An ejected project cannot use the build command 

查看angular cli版本

ng help version 查看帮助说明$ ng help version ng version <options...>  Outputs Angular CLI version.  aliases: v, --version, -v  --

升级angular cli到最新版本

升级angular cli我们可能首先想到的是npm updatenpm update angular-cli -g 但执行完后,使用ng v查看angular cli 的版本,版本仍然为旧的。下面方法可以升级angular cli到最新版本:全局安装升级angular cli到最新的版本需要先卸载

Angular CLI 集成jQuery

Angular CLI有两种方式集成jQuery:以全局方式导入和以模块方式导入。安装在导入jQuery之前需要先安装:npm install jquery --save npm install @types/jquery --save 全局方式在.angular-cli.json的app.scripts引入jquery&quo

vue-cli 3.0集成sass/scss到vue项目

尝鲜使用vue-cli 3.0.0-beta.6,很容易就可以完成scss到vue项目中。vue-cli 3提供了两种方式集成sass/scss:创建项目是选择预处理器sass 手动安装sass-loader 创建项目选择预处理器sass$ vue create vuedemo ? Please pick a preset: (Use arrow keys) > defa