57. Vue webpack4中babel基本使用

webpack 中 babel 的配置

在日常开发中，如果在项目中使用ES6、ES7等高级语法进行开发，那么浏览器是无法识别的。这时候就需要使用 babel 进行语法的转化，将其转化为 ES5 的语法，提供浏览器识别。

babel的官网地址：https://www.babeljs.cn/

安装babel的说明

参考文献：https://www.cnblogs.com/guolao/archive/2019/07/25/11244758.html

官网安装说明：https://www.babeljs.cn/setup#installation

57. Vue webpack4中babel基本使用 — image-20200310074442456

Babel 提供了各种组件的安装方式，在这里我们选择 webpack 的安装方式。

选择 webpack 之后，则会显示对应组件的安装方式，下面我们按照官网提供的方式来安装一下。

不过在此之前，先来初始化一个webpack的构建文件结构。

构建webpack的文件结构

初始化 package.json 文件

package.json 使用存储记录 npm 安装相关包版本即可的。执行以下命令进行初始化：

npm init -y

执行如下：

安装webpack

安装webpack工具至本地项目中：

npm i -D webpack webpack-cli

执行如下：

采用webpack的配置文件设置输出打包文件

本次的构建目的只是为了验证高级js语法在安装babel之后能否正常编译执行，所以我就不在 index.html 中写内容了。

在项目根目录创建、编写配置文件 webpack.config.js

const path = require('path');

// 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象
module.exports = {
    // 在配置文件中，需要手动指定 入口 和 出口
    entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
    output: { // 输出文件相关的配置
        path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
        filename: 'bundle.js' // 这是指定 输出的文件的名称
    },
};

一般来说，现在就可以执行 webpack 命令进行打包了，但是我在上面将 webpack 安装到本地项目中，所以还需要编写 npm 执行内部命令的脚本，才能够执行。

在 package.json 配置执行本地 webpack 执行命令

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack"
  },

好了，配置了这个之后，就可以使用 npm run 脚本名称 来执行了，执行如下：

npm run dev

可以看到已经可以成功编辑打包出 bundle.js 压缩文件了。

编写`main.js`打印信息，设置 index.html 引用 bundle.js 脚本

首先在main.js 写一个打印信息，如下：

console.log("hello world");

然后在index.html引入bundle.js，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="../dist/bundle.js"></script>

</body>
</html>

此时，执行npm run dev打包一个新的 bundle.js ，然后打开 index.html，查看能否正常打印信息，如下：

那么下面就要开始安装babel，然后使用高级一些的语法来看看能否编译成功。

在main.js中写入ES6语法，查看打印信息

在安装babe将ES6ES7转化低于语法ES5之前，我先经过测试，发现使用ES6的语法在chrome浏览器是能够支持运行的，而在IE则会报语法错误，如下：

main.js 代码如下：

// ES5
console.log("hello world es5");

// ES6
class Bar {
    doStuff() {
        console.log('stuff bar');
    }
}

var b = new Bar();
b.doStuff(); // "stuff"

// ES6
class Foo {
    static classMethod() {
        return 'hello static foo';
    }
}

console.log(Foo.classMethod()); // 'hello'

下面再来运行npm run dev打包编译 bundle.js。

首先在chrome浏览器查看index.html，查看打印信息如下：

说明 chrome 浏览器默认是支持 es6 语法的。

然后在ie浏览器查看index.html，查看打印信息如下：

说明 ie 默认是不支持 es6 语法的。

那么下面，我们开始来安装配置babel，看看后续 ie 浏览器能否支持。

安装babel

安装babel至本地项目中：

cnpm i -D babel-loader @babel/core

执行如下：

为了转化 es6 代码，要安装 babel 插件:

cnpm i -D @babel/preset-env @babel/polyfill

执行如下：

在根目录下创建 babel 配置文件 .babelrc:

{
  "presets": ["@babel/preset-env"]
}

配置webpack.config.js设置使用babel的规则

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

再次在ie浏览器确认高级语法能否识别

好了，下面来在执行npm run dev打包编译一下，看看 ie浏览器能否识别打印高级语法的信息，如下：

防止全局污染

值得注意的是babel打包编译的时候，如果是写第三方库或者框架，使用 polyfill 可能会造成全局污染，所以可以使用 @babel/plugin-transform-runtime 防止全局污染。

安装：

npm i -D @babel/plugin-transform-runtime
npm i -S @babel/runtime @babel/runtime-corejs2

注意：使用 -D 也就是 --save-dev，将其安装好测试开发环境，而 -S 也就是 --save ，将其安装到生产环境的依赖中。

运行如下：

增加 babel 配置：

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

注意："corejs": 2, // 这里设置2是因为上面安装的版本是