这篇文章主要介绍了如何使用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功能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # 第一套包，相当于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中添加新的匹配规则

    1
    2
    { 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中写如下配置：

    1
    2
    3
    4
    {
        "presets": ["env", "stage-0"],
        "plugins": ["transform-runtime"]
    }

2. 备注

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

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

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

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

    1
    2
    3
    4
    5
    "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，但是这里报了一个警告：

    1
    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来安装：

    1
    npm i @babel/core -D
    1. 如果你希望安装Babel 6.x，你可以使用下面的命令：
    1
    npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
    1. 如果你想使用Babel 7，理论上你可以使用下面的命令安装：
    1
    npm i @babel/core babel-loader babel-plugin-transform-runtime -D

  • 2.3 参考资料来自stackoverflow