webpack中配置babel

这篇文章主要介绍了如何使用webpack4.x配置babel，以及如何解决babel-loader和babel-core的兼容性问题。

1. 使用webpack来配置babel

在webpack中默认只能处理一部分ES6新语法，一些更高级的ES6语法或者ES7z语法webpack处理不了，这时候就需要借助第三方loader来帮助webpack处理这些更高级的语法，把这些高级语法转化为浏览器能解析的低级语法，然后会把结果交给webpack去打包到bundle.js中。

• 1.1 在webpack中安装两套包去安装Babel相关的loader功能

  # 第一套包，相当于babel的转换工具
  npm i babel-core babel-loader babel-plugin-transform-runtime -D
  # 第二套包，babel的语法
  npm i babel-preset-env babel-preset-stage-0 -D
  
  ## 安装第一个包出现报警告 babel-loader@8.0.5 requires a peer of @babel/core@^7.0.0 原因如下：
  # babel-loader@8.x is the Webpack integration used for Babel 7.x. Babel 7.x has moved all packages from a babel-prefix to the @babel npm scope.
  # 解决办法就是 将babel-loader@8.x降级为babel-loader@7.x
  # npm uninstall babel-loader -D
  # npm i babel-loader@7 -D
  # 或者一开始就直接为babel-loader指定到@7版本
  # npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
  ## 第二个包中安装的babel-preset-env时一个包含了所有 es* 的语法，比之前的es2015语法范围更大
  

• 1.2 在webpack.config.js中的module的rules中添加新的匹配规则

  { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
  // 注意：在配置babel-loader规则的时候需要通过exclude把node_modules目录去掉，如果不排除这个node_modeles打包速度回非常慢且消耗CPU，即使通过babel把node_modules打包好了，项目也无法正常运行。
  

• 1.3 在项目根目录中创建一个.babelrc的Babel配置文件，这个配置文件是json格式的，配置时必须符合json语法：不能写注释，字符串必须是双引号等。在.babelrc中写如下配置：

  {
      "presets": ["env", "stage-0"],
      "plugins": ["transform-runtime"]
  }
  

2. 备注

• 2.1 关于babel-loader和babel-core版本兼容性问题

  在安装babel的转换工具包时：

  npm i babel-core babel-loader babel-plugin-transform-runtime -D
  

  安装完成后package.json中显示：

  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    ...
  },
  

  注意：package.json中的信息显示，在npmjs.com仓库中babel-core最新版本是6.26.3，同时babel-loader最新版本是8.0.5，但是这里报了一个警告：

  npm WARN babel-loader@8.0.5 requires a peer of @babel/core@^7.0.0 but none is installed. 
  

• 2.2 关于上述问题的解答：

  1. babel-loader@8.x是webpack用于Babel 7.x的一个整合loader模块，Babel 7.x已经把所有的相关的包从babel-迁移到了@babel的npm环境仓库。

     所以上述警告是合适的，你可以通过使用@babel/core代替babel-core来安装：

  npm i @babel/core -D
  

  1. 如果你希望安装Babel 6.x，你可以使用下面的命令：

  npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
  

  1. 如果你想使用Babel 7，理论上你可以使用下面的命令安装：

  npm i @babel/core babel-loader babel-plugin-transform-runtime -D
  

• 2.3 参考资料来自stackoverflow