Webpack4.x与babel7.x的配置

前言

昨天在学babel的配置的时候失败了，然后上网查了一下，是由于6.x版本和7.x版本的兼容问题。
因为我是装了好几遍都失败了，然后我就把node_modules删掉，直接重装了。

版本差异

6.x版本和7.x版本有一些不同

1. 6.x版本都是babel-xx，但是7.x版本大都是@babel-xx
2. stage-x插件在7.x中被废弃了

步骤

下载Babel的转换工具

1. 下载babel-loader，注意，这个前面是没有@的

cnpm i babel-loader -D

2. 下载@babel-core

cnpm i @babel-core -D

3. 下载@babel/plugin-transform-runtime

cnpm i @babel/plugin-transform-runtime -D

下载Babel的语法，它提供了ES6到ES3的对应关系

4. 下载@babel/preset-env，它包含了所有和es***相关的语法

cnpm i @babel/preset-env -D

在webpack.config.js中添加新的配置规则

{test:/\.js$/,use:['babel-loader'],exclude:/node_modules/}//配置babel来转换高级的语法

注意:在配置babel的loader规则的时候，必须把node_modules目录，通过exclude选项排除掉:原因有俩：

• 如果不排除node_modules,则babel会把node_modules中所有的第三方JS文件都打包编译，这样会非常消耗cpu，同时，打包速度非常慢
• 哪怕最终Babel把所有node_modules中的JS转换完毕了，但是，项目也无法正常运行

配置

• 在项目的根目录中，新建一个叫做 .babelrc 的babel配置文件，这个配置文件属于json格式，所以在写 .babelrc 配置的时候，必须符合json规范：不能写注释，字符串必须用双引号
• 在 .babelrc 写如下的配置 :大家可以把preset翻译成[语法]的意思

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

但是由于我在main.js里面写了ES6的class语法，而stage-x插件已经废弃了，所以还是报了**Cannot find module ‘@babel/plugin-proposal-class-properties’**的错误，我们需要安装一些别的插件，来取代stage插件的功能。

ERROR in ./src/main.js
Module build failed (from ./node_modules/_babel-loader@8.0.5@babel-lo
ader/lib/index.js):
Error:  f
rom 'F:\WebstormProjects\webpack-study'
    at Function.module.exports [as sync] (F:\WebstormProjects\webpack
-study\node_modules\_resolve@1.10.0@resolve\lib\sync.js:58:15)
    at resolveStandardizedName (F:\WebstormProjects\webpack-study\nod
e_modules\_@babel_core@7.3.3@@babel\core\lib\config\files\plugins.js:
101:31)

于是我按照提示

cnpm i @babel/plugin-proposal-class-properties -D

又报错: Can’t resolve '@babel/runtime/helpers/classC
allCheck’

ERROR in ./src/main.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/classC
allCheck' in 'F:\WebstormProjects\webpack-study\src'
 @ ./src/main.js 1:0-68 16:2-17
 @ multi ./node_modules/_webpack-dev-server@3.2.0@webpack-dev-server/
client?http://localhost:8080 ./src/main.js

于是我按照提示

cnpm i @babel/runtime/helpers/class
CallCheck -D

但是下载失败了

 Install fail! Error: [@@babel/runtime/helpers/classCallCheck] reso
lved target F:\WebstormProjects\webpack-study\@babel\runtime\helpers\
classCallCheck error: ENOENT: no such file or directory, lstat 'F:\We
bstormProjects\webpack-study\@babel'

查找资料后发现

cnpm i @babel/runtime -D

配置.babelrc

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

成功了！