BabelJS - 使用 Babel 7 进行项目设置

---

Babel 的最新版本 7 发布，对现有软件包进行了更改。安装部分与 Babel 6 相同。Babel 7 中唯一的区别是所有软件包都需要使用@babel/安装，例如 @babel/core、@babel/preset-env、@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文件 -

创建一个文件夹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-预设-env
• babel-预设-最新
• Babel 中的舞台预设

此外，包中的年份也被删除 - @babel/plugin-transform-es2015-classes现在是@babel/plugin-transform-classes

我们将看到另一个使用 Typescript 的示例，并使用 Typescript 预设和 babel 7 将其转换为 Es2015 JavaScript。

要使用 typescript，我们需要安装 typescript 包，如下所示 -

npm install --save-dev @babel/preset-typescript

在src/文件夹中创建test.ts文件并以打字稿形式编写代码 -

测试.ts

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

getName("Siya");

.babelrc

命令

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

测试.js

"use strict";

var getName = function getName(person) {
   return "Hello, " + person;
};

getName("Siya");