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是必备的吧
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。