react项目配置babel7

jiezi

5 年前

{
  "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 的库支持

react项目配置babel7

babel7 React 项目配置

不多说，先上 babelrc 配置

总结