[知识体系] babel

[ly525]

• [ ] @babel-cli 是干啥的？

• [ ] @babel/core 与 @babel/preset-env 有什么区别？？

preset(从右边到左)

• 简写：@babel/preset-xxx => @babel/xxx

  
  # @babel/preset-env，在Babel6时代，名字是：babel-preset-env
  # @babel/preset-env，是Babel6时代，babel-preset-latest的增强版。
  # @babel/env, 是 @babel/preset-env的简写。
  { "presets": ["@babel/preset-env"]  } 

{ "presets": ["env"] } # babel-preset-env { "presets": ["vue"] } # babel-preset-vue { "presets": ["@vue/app"] } { "presets": ["@vue/jsx"] } # @vue/jsx { "presets": ["@vue/cli-plugin-babel"] } { "presets": ["@vue/babel-preset-app"] } { "presets": ["@vue/babel-preset-jsx"] } # Babel7

## plugin(从左到右)
```bash
{ "plugins": ["@vue/babel-plugin-jsx"] }  # jsx for vue3

# vue2
# babel-plugin-transform-vue-jsx（3.x for Babel 6，4.x for babel7）
# @vue/babel-plugin-transform-vue-jsx（Babel7）
{ "plugins": ["transform-vue-jsx"] }  # 

const babel = require('@babel/core')

const code = `
const sayHi = () => {
  console.log('hello babel')
}

sayHi()
`

const optionsObject = {}
const result = babel.transform(code, optionsObject)
console.log(result)