前言
ES6 是目前前端开发中使用最广泛的 Javascript 版本之一。但是，在一些旧版浏览器中，可能无法支持 ES6 的语法。因此，我们需要在项目中使用 Babel 来将 ES6 代码转换为 ES5 代码，以确保浏览器的兼容性。同时，我们也需要将编译后的代码打包成 iife 模块，以便在非模块化的环境下使用。
本文将详细介绍如何使用 Babel 编译 ES6 代码并打包成 iife 模块。
准备工作
在开始之前，我们需要安装并配置好以下工具：
Node.js：我们需要安装 Node.js，因为 Babel 是一个基于 Node.js 的工具。
Babel：Babel 是一个 Javascript 编译器，它可以将 ES6 代码转换为 ES5 代码。
Webpack：Webpack 是一个模块打包工具，它可以将多个文件打包成一个文件。我们需要使用 Webpack 将编译后的代码打包成 iife 模块。
安装依赖
首先，我们需要安装一些依赖：
npm install --save-dev @babel/cli @babel/core @babel/preset-env webpack webpack-cli
这里，我们安装了 Babel、Webpack 等工具。
创建工程和源码
接下来，我们需要创建一个工程和源码。
- project
|- src
|- index.js
|- webpack.config.js
|- package.json在 src 文件夹下创建一个 index.js 文件，里面输入以下代码：
const arr = [1, 2, 3]; const squareArr = arr.map(x => x * x); console.log(squareArr);
这是一个简单的 ES6 代码例子，它使用了箭头函数和数组的 map 方法。
配置 Babel
在工程目录下创建一个 .babelrc 文件，输入以下代码：
{
"presets": ["@babel/preset-env"]
}这里我们启用了 @babel/preset-env 预设，它可以根据当前的环境来决定需要编译哪些 ES6 代码。
配置 Webpack
在工程目录下创建一个 webpack.config.js 文件，输入以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
-------- ------------
-------------- -----
--
-------- -------------
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
--这里，我们将入口文件指定为 src/index.js，将输出文件指定为 dist/bundle.js。同时，我们将输出文件设置为 umd 模块，并将其命名为 myLibrary。
打包并使用
最后，在命令行中运行以下命令进行打包：
npx webpack
打包完成后，我们在 dist/bundle.js 文件中可以看到编译后的代码。我们可以在一个 HTML 文件中引入它，并在浏览器中查看它是否能够正确运行。
-- -------------------- ---- -------
--------- -----
------
------
----------- ---- --------------
-------
------
------- -------------------------
--------
----------------------- --------- --- -- --
---------
-------
-------这里，我们在 body 中引入了我们通过 Webpack 打包的文件，同时在 script 标签中输出了我们使用 iife 模块打包生成的 myLibrary 变量。
结论
通过这篇文章，我们可以学习如何使用 Babel 编译 ES6 代码并打包成 iife 模块。这对于开发纯 Javascript 库或在非模块化的环境中使用 Javascript 代码时非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b3eac9babaf620faa39ab