[知识体系] babel

• @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(从左到右)

{ "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)