詳解babel升級到7.X采坑總結(jié)

第詳解babel升級到7.X采坑總結(jié)ERRORin./src/index.jsx

Modulebuildfailed(from./node_modules/babel-loader/lib/index.js):

Error:Plugin/Presetfilesarenotallowedtoexportobjects,onlyfunctions.

將babel-preset-*卸載,重新安裝@babel/preset-*，并且修改.babelrc中的presets

比如我的

-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，從babel-preset-mobxgit提交日志上看，作者已經(jīng)支持了最新的babel。在之后的測試中，發(fā)現(xiàn)mobx的功能也能正常使用。

另外，stage-*已棄用

ERRORin./src/index.jsx

Modulebuildfailed(from./node_modules/babel-loader/lib/index.js):

TypeError:this.setDynamicisnotafunction

atPluginPass.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-loader":"^8.0.2"

"babel-preset-mobx":"^2.0.0",

"dependencies":{

"@babel/runtime":"^7.0.0",

總結(jié)

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

總的來說，babel舍棄了以前的babel-*-*的命名方式，改成了@babel/*-*

修改依賴和.babelrc文件后就能正常啟動項(xiàng)目了。

webpack不用修改（除非你是webpack3.X升webpack4.X）

上面的只是我遇