react项目配置babel7

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开头的，所有的模块插件啥的都是在node_modules/@babel/目录下
• babel中真正干活的是插件，插件的作用是transform
• preset（预置），就是一个插件包的集合，你也可以自己写插件包,插件包不够用，再配置plugins呗
• 配置了babel7,肯定要用新版本的babel-loader,老版本的babel-loader会找 babel-core而不是@babel/core会报错
• babel7新增了babel.config.js配置文件，是项目级别的配置，建议使用， .babelrc配置仍然可以用，至于为啥，memorepo可以了解一下
• babel7废弃了babel-preset-stage-0这样的配置，如果不懂stage-0啥的，自行学习，如果要用，需要直接引入cores-js的相关模块
• @babel-preset-env 这样的preset可简写，如上
• polyfill垫片，就是web开发中，可移植的代码补充库
• 关于babel-polyfill其实就是core-js 和 一个工具库
• core-js是实现了一些现在没支持的新功能的库，分2和3两个大版本
• babel6之后，对export default 这样的 es 模块写法不支持，需要一个 babel-plugin-add-module-exports的库支持
• 要支持装饰器的写法，需要@babel/plugin-proposal-decorators 插件支持，配置如上
• babel-plugin-import 是配置antd按需加载的一个插件，做React项目，几乎antd是必备的吧