Babel7 项目设置
最新版本的 Babel, 7 发布,对现有软件包进行了更改。安装部分与 Babel 6 相同。 Babel 7 的唯一区别是所有包都需要使用
@babel/ 安装,例如 @babel/core、@babel/预设环境、@babel/cli、@babel/polyfill 等
这是使用 babel 7 创建的项目设置。
命令
执行以下命令开始项目设置-
安装以下软件包
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-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
命令
npx babel src/test.ts--out-file test.js
test.js
"use strict";
var getName = function getName(person) {
return "Hello, " + person;
};
getName("Siya");