前言
没啥好说的，直接开干。
先用官方升级插件进行包的升级
官方提供了很方便的插件 直接看代码
安装
npm i -g babel-upgrade
运行命令
npx babel-upgrade --write --install
输出的日志
"devDependencies": {
+ "@babel/core": "^7.0.0",
+ "@babel/plugin-proposal-class-properties": "^7.0.0",
+ "@babel/plugin-proposal-json-strings": "^7.0.0",
+ "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+ "@babel/plugin-syntax-import-meta": "^7.0.0",
+ "@babel/plugin-transform-runtime": "^7.0.0",
+ "@babel/polyfill": "^7.0.0",
+ "@babel/preset-env": "^7.5.5",
+ "@babel/runtime-corejs2": "^7.0.0",
- "babel-core": "^6.26.0",
- "babel-loader": "^7.1.2",
+ "babel-loader": "^8.0.0",
"babel-plugin-component": "^1.1.1", //这个没有变化
- "babel-plugin-syntax-dynamic-import": "^6.18.0",
- "babel-plugin-transform-runtime": "^6.23.0",
- "babel-polyfill": "^6.26.0",
- "babel-preset-env": "^1.6.1",
- "babel-preset-latest": "^6.0.0",
- "babel-preset-stage-3": "^6.24.1",
- "babel-runtime": "^6.26.0"
}
运行完毕之后发现多了三个插件,就不解释了 直接看官网的例子 很鲜明
@babel/plugin-proposal-class-properties react用户必看 也必用这个
@babel/plugin-proposal-json-strings
@babel/plugin-syntax-import-meta
plugins配置方式
运行上面的命令之后会自动修改你的配置文件 但是有些是不需要的 并且还有一些错误
比如：
Error: .plugins[2][1] must be an object, false, or undefined
修改后的 .babelrc
在babel8 插件的参数已经改变了方式，在plugins[2][1]有错误将[]去掉即可
"plugins": [
"@babel/plugin-syntax-dynamic-import",
[
"@babel/plugin-transform-runtime",
{
"corejs": 2
}
],
[
"component",
- [
{
"libraryName": "mint-ui",
"style": true
}
- ]
],
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings"
]
浏览器 以及 "polyfill"
Invalid Option: 'borwsers' is not a valid target
Maybe you meant to use 'browsers'?
修改后的 .babelrc
"presets": [
[
"@babel/preset-env",
- {
- "targets": {
- "borwsers": [
- "last 2 version",
- "safari >= 7"
- ]
- }
- }
]
],
改为即可 并且添加参数
"presets":[
[
"@babel/preset-env",
{
"corejs": 2,//需要指定corejs版本文档并没有写 不要用3 目前3还有点问题
"useBuiltIns": "usage"//按需引入polyfill
}
]
]
plugins plugin-transform-runtime的问题
输出的日志
You should also be sure that the version you pass to the `corejs` option matches the version specified in
your `package.json`'s `dependencies` section.
If it doesn't, you need to run one of the following commands:
npm install --save core-js@2 npm install --save core-js@3
yarn add core-js@2 yarn add core-js@3
npm install --save core-js@2
看配置表 发现插件plugin-transform-runtime多了一个参数 corejs
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 2 //一定要安装core-js@2v版本 而不是3
}
]
]
莫名其妙的警告 WARNING export 'default'
"export 'default' (imported as 'RongIMLib') was not found in './js/RongIMLib-2.4.0.min'
大致意思就是一些插件没有使用 export default的方式进行导出
很多插件都是使用:
if (typeof define === 'function' && define.amd) {
define(factory);
} else if (typeof exports === 'object') {
module.exports = factory();
} else {
self.Curve = factory();
}
所以需要一个插件 将es2015模块转换为CommonJS。
babel官网搜索 CommonJS关键词
找到
@babel/plugin-transform-modules-commonjs
npm i -D @babel/plugin-transform-modules-commonjs
并添加到 .babelrc plugins中
若有其他疑问 欢迎留言
我到这里是没有什么问题了
