深入webpack之将代码转为ES5

在这篇文章中，发现是可以借助babel的API手动把let变成var，那么

能不能自动把代码转为ES5？

可以，使用babel/core和babel/preset-env即可
@babel/core包含@babel/parser，@babel/traverse，@babel/generator

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

// test.js代码在下面👇
const code = fs.readFileSync('./test.js').toString()
// 将原始code转为ast
const ast = parse(code, { sourceType: 'module' })
// transformFromAstSync接收原始ast，和原始code，生成新code
const result = babel.transformFromAstSync(ast, code, {
  presets: ['@babel/preset-env']
})
// 得到es5代码，写入test.es5.js
fs.writeFileSync('./test.es5.js', result.code)

// test.js在这里👈
// let a = 'let'
// let b = 2
// const c = 3

运行上面代码

test.es5.js

可以发现所有let，const声明，都变成了var，其实不光是变量声明，babel.transformFromAstSync会将所以ES5不支持的语法，变成合法ES5代码