babel6升级到babel7

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_24147051/article/details/102778488

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

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

（2）Babel 7 提供多种配置

1. .babelrc
2. babel.config.js
3. 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-core

npm i -D @babel/core

npx 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