最近工作比較忙，有一段時間沒有寫前端玩了。今天試著搭一個專案，發現各種坑，以前用起來非常好的配置檔案各種報錯。排查後發現原來babel升級了一個大版本，已經到7.X了，這裡我總結一下升級過程中踩到的坑。

Error: Cannot find module '@babel/core'
[email protected] requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install '[email protected]'.
    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)
    ....
 

沒找到@babel/core，需要把babel-core解除安裝掉，從新安裝@babel/corenpm un babel-corenpm i -D @babel/core

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.
...

將babel-preset-*解除安裝,重新安裝@babel/preset-*，並且修改 .babelrc

比如我的

npm:
-  babel-preset-env
+  @babel/preset-env
-  babel-preset-react
+  @babel/preset-react
-  babel-preset-stage-0

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

除了上述的preset，我還用了babel-preset-mobx但是沒找到 @babel/preset-mobx，從

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-plugin-*解除安裝，重新安裝@babel/plugin-*然後修改.babelrc檔案具體的包名可以在 npm倉庫 裡找

最終檔案

.babelrc:

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

`package.json:`

"devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-stage-0": "^7.0.0",
    "babel-loader": "^8.0.2"
    "babel-preset-mobx": "^2.0.0",
    ...
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0",
    ...
  }

總結

這次升級，功能上有什麼變化我就不在這裡寫了，大家可以自行搜尋

總的來說，babel捨棄了以前的 babel-*-* 的命名方式，改成了@babel/*-*修改依賴和.babelrc檔案後就能正常啟動專案了。webpack不用修改（除非你是webpack 3.X 升webpack 4.X）

上面的只是我遇到的問題，如果還有其他問題，可以參考資料 Upgrade to Babel 7