babel基本使用

babel的基础概念

babel本质上是一个JavaScript的语法编辑器，可以把高版本的js语法，编译成浏览器可识别的语法。

babel的用途

• 语法向后兼容。如：es6转换成es5
• polyfill在目标环境中，添加缺失的特性
• 源码转换

bable的使用

bebel cli

npx babel script.js --watch --out-file script-compiled.js

具体方式查看 这里

babel配置

• babelrc.json 项目根目录，对整个项目有效
• babel.config.json 项目根目录，对整个工程有效（可跨项目）
• package.json中的babel字段 （效果等同babelrc.json）

plugin

babel的运行顺序里，plugin 在 presets之前， plugin之间，由前向后

{
  "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
}

// 插件参数配置
{
  "plugins": [
    [
      "transform-async-to-module-method",
      {
        "module": "bluebird",
        "method": "coroutine"
      }
    ]
  ]
}

preset

preset之间的顺序是从后往前执行的,preset的配置和plugin相似

{
  "presets": [    "presetA",    ["presetA"],
    ["presetA", {}],
  ]
}

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "esmodules": true
      },
      "useBuiltIns": "entry" 
    }]
  ]
}

targets：指定浏览器

useBuiltIns用来指定polyfill

• false 默认值，什么也不做
• entry 根据环境配置自动注入
• usage 根据实际使用自动注入 实际项目中常用

polyfill

• babel7.4之前使用polyfill 只需要引入@babel/polyfill
• babel7.4之后需要import core-js/stabel和import regenerator-runtime/runtime

在babel的polyfill中，使用当前的配置，在项目build之后，dist文件夹中会因为polyfill的转化，生成大量重复的代码（例如：项目中不通文件都使用了calss语法，polyfill就要转化多次，语法就出现了大量的重复） @babel/plugin-transform-runtime和@babel/runtime可以解决这种问题，并且不会污染别的环境

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage" 
    }]
  ],
  "plugins": [
  	["@babel/plugin-transform-runtime"]
  ]
}