前言
在当前的前端开发环境下，ES6 已经成为了主流的开发语言，而 ES6 模块化则相较于以前的 CommonJS、AMD 等规范更加方便、易用。但是在浏览器环境下，即使是现代浏览器也不支持 ES6 模块，这就要求我们引入 Babel 进行编译。本文将详细介绍如何使用 Babel 编译浏览器端的 ES6 模块。
如何引入 Babel
安装
Babel 是一个 JavaScript 编译器，所以需要在项目中引入相应的模块。可以通过 npm 进行全局安装：
npm install -g babel-cli
也可以在项目中进行局部安装：
npm install --save-dev babel-cli
安装完成后，可以使用 babel -v 命令来检查是否安装成功。
配置文件
在项目根目录下创建 .babelrc 文件，并添加如下配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- ------ - ----------
-
-
-
--
---------- -
------------------------------------------
-
-其中，@babel/preset-env 指定 Babel 使用的预设，这个预设将不同的 ES6 语法转译成 ES5 可以兼容的代码。targets 参数指定了需要支持的浏览器版本，这里只要支持最新的两个版本即可。@babel/plugin-transform-modules-commonjs 插件将 ES6 模块化转译成 CommonJS 规范，以便浏览器可以正确解析。
使用 Babel 编译 ES6 模块
构建工具
在实际项目中，我们通常会使用构建工具进行编译、打包等操作，这里以 webpack 为例。
- 安装依赖：
npm install --save-dev webpack webpack-cli babel-loader
- 在 webpack 配置文件中添加如下规则：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -
-
--------------------
-
---------- -
----------- ------ - ----------
-
-
-
--
-------- -
------------------------------------------
-
-
-
-
-
-其中，babel-loader 将通过 .babelrc 文件中的配置进行编译，.js 文件会匹配该规则进行编译。
- 运行 webpack 进行编译打包
npx webpack
在 HTML 中使用
在 HTML 中引入已经编译好的 JS 文件即可，这里事先将编译好的文件放入 /dist 文件夹中：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ------------
-------
------
------- --------------------------------
-------
-------示例代码
原始代码
// index.js
import {hello} from './hello.js'
hello('world')// hello.js
export function hello(name) {
console.log(`Hello, ${name}!`)
}编译后代码
// index.js
'use strict';
var _hello = require('./hello.js');
(0, _hello.hello)('world');-- -------------------- ---- ------- -- -------- ---- -------- ------------------------------ ------------- - ------ ---- --- ------------- - ------ -------- ----------- - ------------------- -------------- ------ -
总结
Babel 是当前前端开发不可或缺的工具之一，使用 Babel 可以让我们充分发掘 ES6 的优势，同时兼顾浏览器兼容性。本文介绍了如何配置 Babel 并使用 webpack 进行编译打包，其中的示例代码可以供读者进行学习借鉴。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64dda3bbf6b2d6eab38ddfa8