彻底解决Error: Requires Babel “^7.0.0-0“, but was loaded with “6.26.3“. 的问题

问题产生

在babel升级到7以后，按照其官网的要求，安装了babel 7.0相关的包，具体包括@babel/core， @babel/cli， @babel/@babel/preset-env，@babel/plugin-transform-runtime，@babel/plugin-proposal-class-properties， @babel/plugin-transform-classes，具体安装命令如下：

cnpm install -D '@babel/core' '@babel/cli' '@babel/preset-env' '@babel/plugin-transform-runtime' '@babel/plugin-proposal-class-properties' '@babel/plugin-transform-classes' browserify
cnpm install -S  @babel/runtime

升级.babelrc配置文件为:

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

安装后，执行命令将es6代码转换为es5

babel src/ -d build/

命令执行失败，显示错误如下

Error: Requires Babel “^7.0.0-0”, but was loaded with “6.26.3”.If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn’t mention “@babel/core” or “babel-core” to see what is calling Babel. (While processing preset: “/Users/arthurfontaine/Documents/Lab/opews/parser/node_modules/@babel/preset-env/lib/index.js”)

按照网上提示，又安装了其他相关的包，具体命令如下：

cnpm install -D babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime 

依旧显示上述错误。继续搜索解决方案，安装新的包，具体如下：

 cnpm install -D jest babel-jest babel-core@^7.0.0-bridge.0 @babel/core

还是没有任何效果。依旧显示上述错误。

问题分析及解决

显然，Babel 7相关的包已经安装，但是6.26.3的包为什么还再起作用？笔者做了一个实验，不再使用全局的babel命令，修改为使用当前项目安装的babel命令，具体如下：

.\node_modules\.bin\babel src -d build

命令执行成功。

之前有同事在全局安装了一个低版本的babel命令，我们虽然更新了当前项目的babel命令，但是没有更新全局的babel命令，所以命令依旧无法执行。

对于webpack报错的情况，我认为道理是一样的。但是由于webpack是默认使用全局babel命令的，所以我们需要升级全局全局的babel命令：

cnpm install -g @babel/core， @babel/cli

全局安装后，babel src -d build命令执行成功。