babel7配置

我的配置

babel.config.js

// babel.config.js
module.exports = {
  // presets 生效顺序是倒序的
  presets: [
    [
      "@babel/preset-env",
      {
        // 如果配置，会覆盖browserslist配置，推荐使用browserslist，这样postcss以及其他工具共同使用一份配置
        // targets: {
        // "chrome": "58", 编译后的语法最低支持到chrome 58
        // "esmodules": true 目标为支持es6模块的浏览器环境
        // "node": true // 目标代码为当前node最新版本的标准
        // },
        useBuiltIns: "usage", // 按需自动引入corejs@3的polyfill,entry是全局引入
        // 需安装生产依赖core-js@3和regenerator-runtime
        corejs: "3", // 当使用usage参数时，必须指定corejs版本，默认corejs@2，所以这里配置3，生产依赖需要安装core-js@3
      }]，
      ["@babel/preset-react"],
      ["@babel/preset-typescript"]
  ],
  // plugins 生效顺序是正序的
  plugins: [
    // 打包后的代码，辅助函数统一从@babel/runtime里引入，可减少重复代码，但是默认只处理帮助函数
    // 需要安装生产依赖@babel/runtime
    ["@babel/plugin-transform-runtime", {
      // 这样配置可以处理polyfill，避免polyfill全局污染，但是没有target配置，所以polyfill代码会全部引入
      // 需安装生产依赖@babel/runtime-corejs3
      // "corejs": 3
    }]
  ]
};

.eslintrc.js

// .slintrc.js
module.exports = {
  // lint环境
  env: {
    es6: true,
    node: true,
  },
  // 扩展规则
  extends: ["airbnb-base"],
  // 解析器
  parser: "@babel/eslint-parser", // 配合babel使用
  parserOptions: {
    ecmaVersion: 12, //es12版本
    sourceType: "module", // default script
    ecmaFeatures: {
      jsx:true,
      impliedStrict: true,
    },
  },
  // 自定义规则 0关闭，1警告，2错误
  rules: {
  },
};

package.json

// package.json
{
  ...
  "scripts": {
    ...
    "babel": "babel src -d lib",
  },
  "devDependencies": {
    ...
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/node": "^7.12.6", // 建议全局安装
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.7",
    "@babel/preset-typescript": "^7.12.7",
  },
  "dependencies": {
    ...
    "@babel/runtime": "^7.12.5",
    "core-js": "^3.8.0",
    "regenerator-runtime": "^0.13.7"
  },
  // https://caniuse.com/ 可以查看各浏览器支持度
  "browserslist": [
    "> 1%", //全球超过1%人数使用的浏览器
    "last 2 versions",// 所有浏览器兼容到最近的两个版本
    "not ie <= 8"// ie版本不低于8
  ]
}

需要安装的依赖

开发依赖

1. @babel/corebabel核心库
2. @babel/cli babel命令行
3. @babel/preset-env babel预设环境，包括已经稳定实现的es6及以上语法插件,当然还有常用的预设@babel/preset-react和@babel/preset-typescript
4. @babel/plugin-transform-runtime 抽取babel辅助函数为公共runtime，减少重复代码
5. @babel/node 转化es6语法为node支持的语法，推荐全局安装
6. babel/eslint-parser 配合eslint使用，不然eslint识别不了超前的es语法

生产依赖

1. corejs@3 polyfill的代码，建议使用corejs 3.0版本
2. regenerator-runtime 生成器语法的依赖
3. @babel/runtime 配合@babel/plugin-transform-runtime使用

参考

• babel官网
• eslint官网
• can i use