阅读 122

babel 7.1.2升级babel 8记录

前言

没啥好说的,直接开干。

先用官方升级插件进行包的升级

官方提供了很方便的插件 直接看代码

安装
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

解决途径-Plugin Options

修改后的 .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'?

解决途径-browserslist-integration

usebuiltins

修改后的 .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中
复制代码

若有其他疑问 欢迎留言

我到这里是没有什么问题了

关注下面的标签,发现更多相似文章
评论