babel与AST

初始化项目

mkdir webpack-study
cd webpack-study
yarn init -y

此时在package.json里面加入以下依赖

{
   
  "name": "01",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
   
    "@babel/core": "7.12.3",
    "@babel/generator": "7.12.5",
    "@babel/parser": "7.12.5",
    "@babel/preset-env": "7.12.1",
    "@babel/traverse": "7.12.5",
    "ts-node": "9.0.0",
    "typescript": "4.0.5"
  },
  "devDependencies": {
   
    "@types/babel__core": "7.1.12",
    "@types/babel__generator": "7.6.2",
    "@types/babel__parser": "7.1.1",
    "@types/babel__preset-env": "7.9.1",
    "@types/babel__traverse": "7.0.15",
    "@types/node": "14.14.6"
  }
}

babel以及项目依赖

对使用到的包进行说明 详细内容请参考: 理解babel的基本原理和使用方法

• @babel/core Babel 是一个 JavaScript 编译器， Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

1. 语法转换
2. 通过 Polyfill 方式在目标环境中添加缺失的特性（通过第三方 polyfill 模块，例如 core-js，实现）
3. 源码转换 (codemods)

• @babel/generator

  这个过程已经在上面的实例中有所展现，使用的插件是@babel/generator，其作用就是将转换好的ast重新生成代码。这样的代码就就可以安全的在浏览器运行。

• @babel/parser

  在babel中编译器插件是@babel/parser，其作用就是将源码转换为AST，

• @babel/preset-env （预设(preset)——babel的插件套装）

  那么问题来了新语法新特性那么多，难道我们要挨个去加吗？当然不是，babel已经预设了几套插件，将最新的语法进行转换，可以使用在不同的环境中，如下：

@babel/preset-env
@babel/preset-flow
@babel/preset-react
@babel/preset-typescript

从名字上就能看出他们使用的环境了，需要注意的是env，他的作用是将最新js转换为es6代码。预设是babel插件的组合，我们可以看下package.json（截取一部分）：

image.png

• @babel/traverse

ast进行遍历parse

• ts-node 使用.d.ts文件 既然要开发一个项目，显然不会只有这些代码。肯定要用到内建模块和第三方模块。然而，直接导入模块，在.ts文件中是不行的。例如：

这是由于typescript自身的机制，需要一份xx.d.ts声明文件，来说明模块对外公开的方法和属性的类型以及内容。感觉有一些麻烦。好在，官方以及社区已经准备好了方案，来解决这个问题。

在TypeScript 2.0以上的版本，获取类型声明文件只需要使用npm。在项目目录下执行安装:

npm install --save-dev @types/node

就可以获得有关node.js v6.x的API的类型说明文件。之后，就可以顺利的导入需要的模块了:

import * as http from 'http';

小试牛刀

我们安装好依赖之后，编写以下代码

touch var_to_let.ts

import {
    parse