4

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是必备的吧

huahuadavids
669 声望26 粉丝

nothing to say, but day day up