吐血总结babel 7.xa版本+Webpack4.x配置

安装babel插件，你踩坑了吗？

不踩不知道，一踩吓一跳，babel 7 是2018.8 发布，做了很大的语法改版 今天试了试，运行了下以前写的代码，发现各种报错，在这里总结下升级过程中遇到的一些细节问题。

Error: Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
  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
参考了官方文档：https://www.babeljs.cn/docs/setup/#installation

安装

由于它的语法做了大的改变，我重装里面的一些包
删除node_modules 全部包 重装

-D表示安装到本地依赖环境
-S表示安装到生产环境

首先 确保你已经装了webpack 和webpack-dev-server

npm install webpack -D
npm install web-dev-server -D
npm install webpack-cli -D    //webpack4.x以上可能要装webpack-cli

话不多说 直接上代码：运行一下命名

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
npm install @babel/plugin-proposal-class-properties -D
npm install @babel/plugin-transform-runtime -D
npm install @babel/runtime

ok 以上装完毕，接下来

解释一下：

在babel 7.x版本中
babel-core变为 @babel/core 语法变了

npm install babel-loader babel-core babel-preset-env webpack
变为：npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

最终装好了还是要在配置文件里面配置下啦

安装包：

package.json 文件:装的包会自动填写到里面

"dependencies": {
    "@babel/runtime": "^7.6.3",
    "babel-loader": "^8.0.0-beta.0",
  },
  "devDependencies": {
    "@babel/core": "^7.6.3",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.6.2",
    "@babel/preset-env": "^7.6.3",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.2"
  }
  

写.babelrc文件：需手动在项目的根目录里面创建

需注意：这个文件的格式严格按照json格式

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

配置 webpack 文件

module:{
        rules:[{
             test:/.js$/,
             use:'babel-loader',
            exclude: /node_modules/
        }]
    }

exclude:的意思是node_modules 包里的js文件 除外，因为他里面的js文件不需要我们去转化
在配置loader的规则时，需把node_modules目录里的js 排除，原因：
1.如果不排除，node_modules，则babel会吧node_modules的js文件也打包编译，这样速度非常慢 非常消耗CPU
2.如果babel 吧node_modules所有的js都转换了 项目会无法运行

总结：

这次升级，功能上有什么变化我就不在这里写了，大家可以自行搜索
总的来说，babel舍弃了以前的 babel-- 的命名方式，改成了@babel/-
修改依赖和.babelrc文件后就能正常启动项目了