聊一聊babel的配置

babel 心得

作用

• 转换新的语法，如 let,const,箭头函数
• 新 API 垫片，如 Object.assign()

项目配置

1. @babel/preset-env 配置 "useBuiltIns": "entry" 根据.browserslistrc 抹平浏览器差异

• 缺点：不管项目中有没有用到，直接导入会增加文件体积，污染全局环境
• 优点：安全，防止第三方库没有适配目标环境

2. @babel/plugin-transform-runtime 配置 "helpers": true，抽离公共方法防止重复，比如 classCallCheck

//babelrc.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": {
          "version": 3,
          "proposals": true
        }
      }
    ]
  ],

  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true
      }
    ]
  ]
}

//并在入口文件处 import 如下内容
import 'core-js/stable'
import 'regenerator-runtime/runtime'

工具库配置

1. @babel/preset-env 配置 "useBuiltIns": false 默认就是 false，此时 babel 只做语法转换，不会增加垫片

2. @babel/plugin-transform-runtime 配置 corejs

• 优点：不会污染全局
• 缺点：targets 配置失效，体积增大

//babelrc.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": false
      }
    ]
  ],

  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": {
          "version": 3,
          "proposals": true
        },
        "helpers": true
      }
    ]
  ]
}

3. 或者使用项目配置，在打包时候将core-js externals掉，同时在package.json配置为 peerdependencies，让使用者在项目中安装，毕竟大多数项目还是要装这个