webpack 之Babel

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

但是具体过程是怎么样的呢？

下面的过程需要用到Babel的三个包

import {parse} from '@babel/parser'
import traverse from '@babel/traverse'
import generate from '@babel/generator'

1. parse：把代码变成ast
2. traverse：遍历ast进行修改
3. generate：把ast变成转换为向后兼容的 js 语法

具体举例：

import {parse} from '@babel/parser'
import traverse from '@babel/traverse'
import generate from '@babel/generator'

const code = `let a = 'let'; let b = 2`
const ast = parse(code, {sourceType: 'module'})
// 遍历
traverse(ast, {
  enter: item =>{
    if(item.node.type === 'VariableDeclaration'){
      if(item.node.kind = 'let'){
        item.node.kind = 'var'
      }
    }
  }
})

const result = generate(ast, {}, code)
console.log(result.code);

如何运行？

node -r ts-node/register xxx.ts

如果想使用chrome调试

node -r ts-node/register --inspect-brk xxx.ts

自动把代码转化为es5

有的时候我们想能不能自动的把代码转化为es5呢，能。使用 @babel/parse和@babel/core即可 具体操作

import {parse} from '@babel/parser'
import * as babel from '@babel/core'

const code = `let a = 'let'; let b = 2; const c = 3`
// 把代码变成ast
const ast = parse(code, {sourceType: 'module'})
// 遍历ast
const result = babel.transformFromAstSync(ast, code, {
  presets: ['@babel/preset-env']
})
console.log(result?.code);

通过打印可以看到

"use strict"; 

var a = 'let';
var b = 2;    
var c = 3;    

代码应该是单独的文件

// test.js

let a = 'let';
let b = 2;
const c = 3;

// file-to-es5.ts
import {parse} from '@babel/parser'
import * as babel from '@babel/core'
import * as fs from 'fs'

const code = fs.readFileSync('./test.js').toString()
// 把代码变成ast
const ast = parse(code, {sourceType: 'module'})
// 遍历ast
const result = babel.transformFromAstSync(ast, code, {
  presets: ['@babel/preset-env']
})
fs.writeFileSync('./test.js', result.code)
console.log(result?.code);

一运行发现

// test.js
"use strict";

var a = 'let';
var b = 2;
var c = 3;