BabelJS教程

Babel7 项目设置

最新版本的 Babel, 7 发布,对现有软件包进行了更改。安装部分与 Babel 6 相同。 Babel 7 的唯一区别是所有包都需要使用 @babel/ 安装,例如 @babel/core、@babel/预设环境、@babel/cli、@babel/polyfill 等
这是使用 babel 7 创建的项目设置。

命令

执行以下命令开始项目设置-
npm init

安装以下软件包

npm install--save-dev @babel/core
npm install--save-dev @babel/cli
npm install--save-dev @babel/preset-env
这是创建的 package.json-
安装包
现在将在根文件夹中创建一个 .babelrc 文件-
创建 Babelrc
创建一个文件夹 src/ 并向其中添加文件 main.js 并编写代码以转译到 es5、

src/main.js

let add = (a,b) => {
   return a+b;
}

转译命令

npx babel src/main.js--out-file main_es5.js

main_es5.js

"use strict";
var add = function add(a, b) {
   return a + b;
};
Babel 7 的工作方式与 Babel 6 保持一致。唯一的区别是使用@babel 安装 pacakge。
在 babel 7 中有一些不推荐使用的预设。列表如下-
ES20xx 预设 babel-preset-env babel-preset-latest Babel 中的舞台预设
包中的年份也被删除- @babel/plugin-transform-es2015-classes 现在是 @babel/plugin-transform-classes
我们将看到另一个使用 typescript 的示例,并使用 typescript preset 和 babel 7 将其转换为 Es2015 JavaScript。
要使用打字稿,我们需要按如下方式安装打字稿包 ​​-
npm install--save-dev @babel/preset-typescript
src/ 文件夹中创建 test.ts 文件并以打字稿形式编写代码-

test.ts

let getName = (person: string) => {
   return "Hello, " + person;
}
getName("Siya");

.babelrc

Babelrc Typescript

命令

npx babel src/test.ts--out-file test.js

test.js

"use strict";
var getName = function getName(person) {
   return "Hello, " + person;
};
getName("Siya");
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4