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"}}
],

react babel如何升级7.1.0相关推荐

web3.0 升级到webpack5.0 以及兼容IE处理
如果你的事vue-cli 或者其他cli 关于IE 兼容不具有什么参考价值.如果是react 项目,你看看就行. webpack3的打包速度已成为诟病,所以我们将原来的webpack3升级至webp ...
webpack 3.1 升级webpack 4.0
webpack 3.1 升级webpack 4.0 为了提升打包速度以及跟上主流技术步伐,前段时间把项目的webpack 升级到4.0版本以上 webpack 官网:https://webpack.j ...
webpack3+node+react+babel实现热加载(hmr)
前端工程化开发的一个重要标志就是热替换技术,它大大的提高开发效率,使我们专注于写代码,webpack3中的热替换相比较1更加简洁. 1. 先看效果 Demo地址 https://github.com/ ...
从.NET1.1升级到.NET2.0时出现的PInvokeStackImbalance错误
从.NET1.1升级到.NET2.0时出现的PInvokeStackImbalance错误微软官方的解释(http://msdn2.microsoft.com/zh-cn/library/0htdy ...
7 环境变量立即生效_MySQL5.7升级到8.0过程详解
前言: 不知不觉,MySQL8.0已经有好多个GA小版本了.目前互联网上也有很多关于MySQL8.0的内容了,MySQL8.0版本基本已到稳定期,相信很多小伙伴已经在接触8.0了.本篇文章主要介绍从5 ...
mysql 5.6 uf8mb4_MySQL5.7升级到8.0过程详解
前言: 不知不觉,MySQL8.0已经发布好多个GA小版本了.目前互联网上也有很多关于MySQL8.0的内容了,MySQL8.0版本基本已到稳定期,相信很多小伙伴已经在接触8.0了.本篇文章主要介绍从 ...
坚果 android 系统升级,坚果手机的系统是什么？坚果手机能升级安卓5.0吗？
坚果手机的手机系统是什么坚果手机的手机系统是Android 4.4系统. 系统方面,坚果手机采用与锤子T1相同的Smartisan OS 1.5,基于Android 4.4.4深度定制的系统表现很出 ...
MySQL从5.7.32升级到8.0.22
目录一.备份与导出数据二.升级到MySQL-8.0.22同时解决字符集问题 2.1.卸载MySQL-5.7.32 2.2.安装MySQL-8.0.22 2.3.修改配置文件 my.cnf 三.导入 ...
android surface 平板,Surface平板能升级安卓4.0吗
Surface平板电脑暂时不能升级安卓4.0. Surface平板电脑x86架构的版本搭载了英特尔Core i5 Ivy Bridge双核处理器,而ARM架构的版本搭载了Nvidia代工的ARM单核处 ...

react babel如何升级7.1.0

react babel升级7.1.0

react babel如何升级7.1.0相关推荐

最新文章

热门文章