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的基本使用。欢迎讨论。