Webpack 如何配置 babel 将 ES6 转换为 ES5？-JavaScript中文网-JavaScript教程资源分享门户

随着 Node.js 和浏览器技术的不断发展，越来越多的前端工程师开始使用 ES6 来编写 JavaScript 代码。但是，由于不同的浏览器对 ES6 的支持程度不同，因此需要使用相应的工具将 ES6 转换为 ES5。其中，Webpack 是最常用的打包工具之一，本文将介绍如何在 Webpack 中配置 babel，将 ES6 转换为 ES5。

什么是 babel？

babel 是一款 JavaScript 编译器，可以将高版本的 JavaScript 语法转换成低版本的 JavaScript 语法，从而在不同环境下运行。babel 支持的语法繁多，包括 ES6/7/8、JSX、Flow 等。

如何在 Webpack 中配置 babel？

要在 Webpack 中配置 babel，需要先安装相应的依赖包。具体步骤如下：

安装 babel-loader
```
npm install babel-loader --save-dev
```
安装 @babel/core
```
npm install @babel/core --save-dev
```

安装 @babel/preset-env

npm install @babel/preset-env --save-dev

在 webpack.config.js 中进行相应配置，示例代码如下：
```
-- -------------------- ---- -------
-------------- - -
  ------- -
    ------ -
      -
        ----- --------
        -------- ---------------  -- -- ------------ --
        ---- -
          ------- ---------------
          -------- -
            -------- --------------------- -- -- ---------- --
          -
        -
      -
    -
  -
-
```
以上代码配置了一个规则，用来转换 .js 文件。其中，test 属性表示需要转换的文件类型，exclude 属性表示要排除的文件夹，use.loader 属性表示使用的 loader，use.options.presets 表示使用的 preset 配置，这里使用的是 @babel/preset-env，它可以根据目标环境自动转换语法。

示例代码

下面是一个简单的 ES6 代码示例：

const foo = () => 'hello world';
console.log(foo());

使用 Webpack 和 babel 将其转换为 ES5 代码，示例代码如下：

"use strict";

var foo = function foo() {
  return 'hello world';
};

console.log(foo());

结论

以上就是在 Webpack 中配置 babel 将 ES6 转换为 ES5 的方法，通过以上步骤，可以帮助前端工程师尽可能兼容不同浏览器，提高代码的可移植性。当然，以上只是最基础的配置，babel 还有很多高级用法可以使用，需要根据具体情况进行调整。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/672092c42e7021665e02df4b