BabelJS - 使用 Babel 7 设置项目

最新版本的 Babel,7 发布,对现有包进行了更改。安装部分与 Babel 6 相同。abel 7 唯一的区别是所有的包都需要用@babel/ 安装,例如@babel/core、@babel/preset-env、@babel/cli、@babel/polyfill 等。
这是使用 babel 7 创建的项目设置。
1、执行以下命令开始项目设置
npm init
2、安装以下软件包
npm install --save-dev @babel/core
npm install --save-dev @babel/cli
npm install --save-dev @babel/preset-env
3、现在将在根文件夹中创建一个 .babelrc 文件
{
"presets": [
"@babel/env",
"@babel/typescript"
]
}
4、package.json如下:
{
"name": "babel7project",
"version": "1.0.0",
"description": "babel7 babel ",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"babel7": "npx babel src/main.js --out-file script/main_es5.js",
"babelts": "npx babel src/index.ts --out-file script/index.bundle.js"
},
"keywords": [
"babel",
"babel7",
"js"
],
"author": "hk",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.18.10",
"@babel/core": "^7.18.13",
"@babel/preset-env": "^7.18.10",
"@babel/preset-typescript": "^7.18.6"
}
}
新建代码main.js
let add = (a,b) => {
return a+b;
}
var k = add(3,6);
console.log(k);
运行脚本:
npm run babel7
转译后的代码如下:
var add = function add(a, b) {
return a + b;
};
var k = add(3, 6);
console.log(k);
好了,基本的babel7的使用流程就是如上所示。
我们再来看看Babel处理typescropt
Babel 7 的工作方式与 Babel 6 相同。唯一的区别是使用 @babel 安装 pacakge。 在 babel 7 中有一些预设已弃用。
我们将看到另一个使用 typescript 的示例,并使用 typescript preset 和 babel 7 将其转换为 Es2015 JavaScript。
要使用 typescript,我们需要安装 typescript 包,如下所示
npm install --save-dev @babel/preset-typescript
在 src/ 文件夹中创建 test.ts 文件并以 typescript 形式编写代码
let getName = (person: string) => {
return "Hello, " + person;
}
getName("Siya");
运行脚本:
npm run babelts
生成的代码如下:
"use strict";
var getName = function getName(person) {
return "Hello, " + person;
};
getName("Siya");
简单吧,以上就是babel7处理ts的基本使用。欢迎讨论。