Babel升级到7.x的踩坑记录

@kvkens 2018-12-18 08:14:35发表于 iuap-design/blog webpack

Babel升级到7.x的踩坑记录

目前在做的台湾的项目里面还是babel6,因为这段时间非常忙,没来得及亲自去测试升级最新的babel7,今天尝试升级了一下,遇到了一些问题,记录一下踩坑!

安装

根据最新的babel包命规则,以往是babel-core现在是@babel/core这样是最新的方式

我直接卸载了以前的老包,然后安装下面这些包

$ npm un babel-core babel-preset-env babel-preset-react babel-preset-stage-2 babel-plugin-transform-runtime -D

卸载完成后开始安装最新的组织包:

直接贴一下我的package.json部分关键代码

"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.2.1",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"@babel/preset-react": "^7.0.0",

然后我运行了一下,报错了,哦对,我的babel-loader还没有升级呢,赶紧安装最新的支持babel7的吧!

$ npm i babel-loader@latest -D

之后我运行了一下:

ERROR in ./src/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.
...

噢,我的天呐,报错了,赶紧查一下,原来是babelrc没有修改,看我这急性子!

这样的话我直接运行会报错:

Error: Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    ....

赶紧来修改babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

在babel7里面我们不需要使用es-2015babel-preset-stage-2这类的包了。

将babel-preset-卸载,重新安装@babel/preset-,并且修改 .babelrc中的 presets

//比如这样修改,只是举个例子
npm:
-  babel-preset-env
+  @babel/preset-env
-  babel-preset-react
+  @babel/preset-react
-  babel-preset-stage-0

.babelrc:
-  "presets": ["react", "env", "stage-0"]
+  "presets": ["@babel/preset-react", "@babel/preset-env"]

以前的stage-*已经弃用了,详情请看:

启动后就不会出下面的错误了,只要我们升级包后

ERROR in ./src/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: this.setDynamic is not a function
    at PluginPass.pre
    ...

这次升级,功能上有什么变化我就不在这里写了,大家可以自行搜索

总的来说,babel舍弃了以前的 babel-- 的命名方式,改成了@babel/-
修改依赖和.babelrc文件后就能正常启动项目了。
webpack不用修改(除非你是webpack 3.X 升webpack 4.X)
我的是使用的uba@2 for webpack2 版本,多入口依然稳定不内存溢出~!

福利

如果手动升级是灾难的话,推荐一款官方升级工具:

当当当~~快戳这里

  1. 安装全局
$ npm install babel-upgrade -g
  1. 切换到项目根目录,就是有package.json .babelrc的地方去执行
$ babel-upgrade --write

当当当~~OK

{
  "devDependencies": {
+   "@babel/core": "^7.0.0",
+   "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+   "@babel/preset-env": "^7.0.0",
+   "babel-loader": "v8.0.0-beta.0"
-   "babel-loader": "6.0.0",
-   "babel-plugin-transform-object-rest-spread": "6.0.0",
-   "babel-preset-env": "^1.0.0",
  },
}