react babel如何升级7.1.0
react babel升级7.1.0
让我们了解一下babel升级到7.1.0,都做了那些改变 !
只大体描述不做细节讲解,详情请看:https://www.babeljs.cn/docs/v7-migration-api
1、移除了以下的组合,这些预设应替换为env预设。
babel-preset-es2015
babel-preset-es2016
babel-preset-es2017babel-preset-latest
2、删除 @babel/polyfill
@babel/polyfill
3、弃用了 stage-x
@babel/preset-stage-0
@babel/preset-stage-1
@babel/preset-stage-2
@babel/preset-stage-3
4、包重命名
{
- “presets”: ["@babel/preset-react"],
+ “presets”: ["@babel/react"], // this is equivalent
- “plugins”: ["@babel/transform-runtime"],
+ “plugins”: ["@babel/plugin-transform-runtime"], // same
…
}
5、Scoped Packages 作用域的范围包
babel-cli -> @babel/cli
babel-core -> @babel/core
babel-preset-env -> @babel/preset-env
package.json 更改
dependencies: {
- “babel-plugin-syntax-dynamic-import”: “^6.18.0”,
- “babel-polyfill”: “^6.26.0”,
_
+ “core-js”: “^3.6.5”,
+ “regenerator-runtime”: “^0.13.5”,
},
devDependencies: {
- “babel”: “^6.23.0”,
- “babel-core”: “^6.26.3”,
- “babel-eslint”: “^8.0.1”,
- “babel-loader”: “^7.1.5”,
- “babel-plugin-transform-decorators-legacy”: “^1.3.5”,
- “babel-plugin-transform-runtime”: “^6.23.0”,
- “babel-preset-env”: “^1.7.0”,
- “babel-preset-react”: “^6.24.1”,
- “babel-preset-stage-0”: “^6.24.1”,
- “babel-runtime”: “^6.26.0”,
_
+ “@babel/core”: “^7.0.0”
+ “babel-eslint”: “^8.2.6”,
+ “babel-loader”: “^8.1.0”,
+ “@babel/plugin-proposal-decorators”: “^7.10.1”,
+ “@babel/plugin-transform-runtime”: “^7.10.1”,
+ “@babel/preset-env”: “^7.10.2”,
+ “@babel/preset-react”: “^7.10.1”,
+ “@babel/plugin-proposal-class-properties”: “^7.10.1”,
+ “@babel/plugin-proposal-object-rest-spread”: “^7.10.1”,
+ “@babel/plugin-syntax-dynamic-import”: “^7.8.3”,
}
.babelrc
{
"presets": [
[
"@babel/env",
{
"corejs": "3",
"useBuiltIns": "entry",
"targets": {
"chrome": "58",
"ie": "10"
}
}
],
"@babel/preset-react"
],
"plugins": [
[
"@babel/plugin-proposal-decorators", // 支持es7装饰器
{
"legacy": true
}
],
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties", //使用class新属性
"@babel/plugin-transform-runtime",
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
},
"antd"
],
[
"import",
{
"libraryName": "@antd-design/icons",
"libraryDirectory": "dist/icons",
"camel2DashComponentName": false
},
"@antd-design/icons"
],
]
}
替代 @babel/polyfill
// 入口文件出引入
import "core-js/stable";
import "regenerator-runtime/runtime";
// .babelrc 下添加
[
"@babel/env",
{
"corejs": "3",
"useBuiltIns": "entry",
"targets": {
"chrome": "58",
"ie": "10"
}
}
],
更多推荐
所有评论(0)