一、Babel 7 庫的作用域 (scope)

（1）Babel 7 用了 npm 的 private scope，把全部的包都掛在在 @babel 下，類似的有 typescript 的 @type。

（2）Babel 7 提供多種配置

.babelrc

babel.config.js

webpack babel loader

二、babel7 相關文件

先看一下babel7配置成功后的樣子

---

babel.config.js

const presets = [['@babel/env',{targets: {edge: '17',firefox: '60',chrome: '67',safari: '11.1',browsers: ['last 2 versions', 'ie >= 7']}}] ] module.exports = { presets }

babel 7 開始, .babelrc 的作用范圍僅限于當前項目，默認不再作用與 node_modules 和工作區 (./packages/*)，如果需要，可以指定作用范圍

在項目 rootDir(項目根目錄）創建 babel.config.js。

.babelrc

{"presets": [["@babel/env",{"targets": {"chrome": "58","ie": "10"},"useBuiltIns": "usage"}]],"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-syntax-dynamic-import","@babel/plugin-proposal-object-rest-spread","transform-vue-jsx"] }

package.json

三、升級步驟

(1)babel-core卸載掉，從新安裝@babel/core

npm un babel-corenpm i -D @babel/corenpx babel-upgrade --write --install

（2）.babelrc 引入插件解析

"plugins": [ "@babel/plugin-transform-runtime", "@babel/plugin-syntax-dynamic-import", "@babel/plugin-proposal-object-rest-spread", "transform-vue-jsx" ]

(3)在package.json文件中 刪除babel6 相關的依賴
在

"devDependencies":{}"dependencies":{}

中 看后面是有babel 版本號寫6.XX.XX的都刪掉

(4)刪除文件夾 node_module 然后重新安裝

rm -rf node_modules yarn install

總結

以上是生活随笔為你收集整理的babel6升级到babel7的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。