babel7 React项目配置

不多说，先上babelrc配置

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "chrome": "66"
        },
        "corejs": {
          "version": 2
        },
        "useBuiltIns": "usage",
        "modules": "commonjs"
      }
    ],
    "@babel/react"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    ["@babel/plugin-proposal-class-properties", {"loose": true}],
    "add-module-exports",
    ["import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

总结

• babel7的包都是以 @babel开头的
• babel7新增了babel.config.js配置文件，是项目级别的配置，建议使用， .babelrc配置仍然可以用
• babel7废弃了babel-preset-stage-0这样的配置，如果要用，需要直接引入cores-js的相关模块
• @babel-preset-env 这样的preset可简写，如上
• 关于babel-polyfill其实就是core-js加一个工具库
• core-js是实现了一些现在没支持的新功能的库，分2和3两个大版本
• babel6之后，对export default 这样的 es 模块写法不支持，需要一个 babel-plugin-add-module-exports的库支持