静下心来的个人专栏
上一篇

BabelJS - 使用 Babel 7 设置项目

广告
选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。
大纲

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

 

版权声明:著作权归作者所有。

X

欢迎加群学习交流

联系我们