- BabelJs 教程
- BabelJs - 主页
- BabelJs - 概述
- BabelJs - 环境设置
- BabelJs-CLI
- BabelJs - ES6 代码执行
- BabelJs - 使用 Babel 6 进行项目设置
- BabelJs - 使用 Babel 7 进行项目设置
- 将 ES6 功能转换为 ES5
- 将 ES6 模块转译为 ES5
- 将 ES7 功能转换为 ES5
- 将 ES8 功能转译为 ES5
- BabelJs - Babel 插件
- BabelJs - Babel Polyfill
- BabelJs - Babel CLI
- BabelJs - Babel 预设
- 使用 Babel 和 Webpack
- 使用 Babel 和 JSX
- 使用 Babel 和 Flow
- 使用 BabelJS 和 Gulp
- BabelJs - 示例
- BabelJs 有用的资源
- BabelJs - 快速指南
- BabelJs - 有用的资源
- BabelJs - 讨论
BabelJS-CLI
Babel 带有内置的命令行界面,可用于编译代码。
创建一个您将在其中工作的目录。在这里,我们创建了名为babelproject的目录。让我们使用nodejs 来创建项目详细信息。
我们使用npm init创建项目,如下所示 -
这是我们创建的项目结构。
现在要使用 Babel,我们需要安装 Babel cli、Babel 预设、Babel 核心,如下所示 -
babel-cli
执行以下命令安装 babel-cli -
npm install --save-dev babel-cli
babel 预设
执行以下命令安装 babel-preset -
npm install --save-dev babel-preset-env
babel 核心
执行以下命令来安装 babel-core -
npm install --save-dev babel-core
安装后,以下是 package.json 中提供的详细信息 -
我们已经在项目本地安装了 babel 插件。这样做是为了我们可以根据项目需求以及不同版本的 babeljs 在我们的项目中以不同的方式使用 babel。Package.json 给出了所使用的 babeljs 的版本详细信息。
为了在我们的项目中使用 babel,我们需要在 package.json 中指定相同的内容,如下所示 -
Babel主要用于编译JavaScript代码,它将具有向后兼容性。现在,我们将在 ES6 -> ES5 或 ES7 -> ES5 以及 ES7->ES6 等中编写代码。
为了在执行时向 Babel 提供相同的指令,我们需要在根文件夹中创建一个名为 .babelrc 的文件。它包含一个 json 对象,其中包含预设的详细信息,如下所示 -
我们将创建 JavaScript 文件 index.js 并使用 Babel 将其编译为 es2015。在此之前,我们需要安装 es2015 预设,如下所示 -
在index.js中,我们使用箭头函数创建了一个函数,这是es6中添加的新功能。使用 Babel,我们将代码编译为 es5。
要执行到 es2015,使用以下命令 -
npx babel index.js
输出
它显示了 es5 中的 index.js 代码,如上所示。
我们可以通过执行命令将输出存储在文件中,如下所示 -
npx babel index.js --out-file index_es5.js
输出
这是我们创建的文件,index_es5.js -