在现代前端开发中，使用 es6 是非常常见的，它能够让我们的代码更加简洁、易读、易维护。但是，es6 并不是所有浏览器都支持的，特别是 ie 浏览器。为了让我们的代码能够兼容 ie 浏览器，我们需要使用 babel 进行转译。本文将介绍如何使用 webpack 和 babel 进行 es6 开发，同时兼容 ie 浏览器。
准备工作
在使用 webpack 和 babel 进行 es6 开发之前，我们需要先安装必要的依赖包。可以通过以下命令进行安装：
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev
其中，webpack 和 webpack-cli 是 webpack 的核心依赖包，babel-loader 是 babel 在 webpack 中的加载器，@babel/core 和 @babel/preset-env 是 babel 的核心依赖包和 es6 转译依赖包。
配置 webpack
在安装完依赖包之后，我们需要对 webpack 进行配置。在项目根目录下创建 webpack.config.js 文件，并添加以下配置：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ----------------------
--
--
--
--
--
--以上配置中，entry 表示入口文件，output 表示输出文件的名称和路径，module.rules 表示加载器的规则。其中，test 表示匹配文件的正则表达式，exclude 表示排除的文件夹，use 表示使用的加载器和加载器的配置。
配置 babel
除了配置 webpack，我们还需要配置 babel。在项目根目录下创建 .babelrc 文件，并添加以下配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----- ----
-
-
-
-
-以上配置中，presets 表示使用的预设，targets 表示要兼容的浏览器版本。在这里，我们设置兼容 ie 11 浏览器。
示例代码
下面是一个简单的示例代码，用于测试 webpack 是否能够正确地将 es6 转译成 es5，并兼容 ie 浏览器：
const arr = [1, 2, 3]; const sum = arr.reduce((a, b) => a + b); console.log(sum);
在运行 npm run build 命令后，webpack 会将以上代码转译成以下代码：
"use strict";
var arr = [1, 2, 3];
var sum = arr.reduce(function (a, b) {
return a + b;
});
console.log(sum);以上代码可以在 ie 11 浏览器中正常运行。
总结
使用 webpack 和 babel 进行 es6 开发，可以让我们的代码更加简洁、易读、易维护，同时也能够兼容 ie 浏览器。在实际开发中，我们需要根据项目的需求和目标浏览器版本，进行相应的配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e5db3e1886fbafa4156bed