前言
ES6 是 ECMAScript 的第六个版本，由于具有诸多新特性，如模块化、Lambda 表达式、Class 等等，因此受到广泛欢迎。
但是，由于各浏览器支持 ES6 特性的进度不一，因此有时候需要使用 Babel 来编译 ES6 代码，将其转换为 ES5 代码，以便在现有浏览器上运行。
本篇文章将详细介绍如何利用 Babel 实现 ES6 模块引入与导出。
模块引入
在 ES6 中，我们可以使用 import 语句来引入模块。
例如，以下代码引入了 lodash 模块：
import _ from 'lodash';
对于没有使用 ES6 的浏览器，则可能无法解析上述语句。因此，我们需要使用 Babel 将其转换为 ES5 代码，才能够在现有浏览器中运行。
首先，我们需要安装 Babel 的相关插件：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
接着，在项目根目录下创建 .babelrc 文件，并在其中添加以下内容：
// www.javascriptcn.com code example
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": [
"> 1%",
"last 2 versions"
]
}
}
]
]
}上述配置中，targets 属性指定了我们要支持的浏览器版本。
然后，我们就可以使用 Babel 转换代码了。在终端中执行以下命令：
npx babel input.js --out-file output.js
其中，input.js 是要转换的源代码文件，output.js 是生成的目标代码文件。
如果一次性需要转换多个文件，则可以在 input.js 中指定多个源代码文件，如下所示：
npx babel file1.js file2.js --out-dir build
执行上述命令后，file1.js 和 file2.js 文件将会被转换，并生成到 build/ 目录下。
模块导出
除了模块引入外，ES6 还提供了一种新的方法来导出模块。我们可以使用 export 语句将模块导出为一个模块对象。
例如，以下代码示例导出了一个常量 PI：
export const PI = 3.14;
同样地，对于没有使用 ES6 的浏览器，则需要使用 Babel 将其转换为 ES5 代码。
和上一节一样，我们需要首先安装 Babel 的相关插件：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
接着，在 .babelrc 文件中添加以下内容：
// www.javascriptcn.com code example
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": [
"> 1%",
"last 2 versions"
]
}
}
]
],
"plugins": [
[
"@babel/plugin-transform-modules-commonjs",
{
"loose": true
}
]
]
}上述配置中，我们新增了一个插件 @babel/plugin-transform-modules-commonjs，用于将 ES6 模块转换为 CommonJS 模块。这是因为大多数浏览器或其他环境只支持 CommonJS 模块化方式。
然后，我们就可以使用 Babel 转换代码了。执行以下命令：
npx babel input.js --out-file output.js
和上一节一样，input.js 是要转换的源代码文件，output.js 是生成的目标代码文件。如果一次性需要转换多个文件，则可以在 input.js 中指定多个源代码文件。
示例
假设我们有以下两个文件，一个是定义了常量 PI 的 math.js 文件：
export const PI = 3.14;
export function add(x, y) {
return x + y;
}另一个是引入了 math.js 模块的 app.js 文件：
import { PI, add } from './math.js';
console.log(PI);
console.log(add(1, 2));我们可以通过执行以下命令，将这两个文件都转换为 ES5 代码：
npx babel math.js --out-file math.es5.js npx babel app.js --out-file app.es5.js
转换后的 math.es5.js 文件内容如下：
// www.javascriptcn.com code example
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.add = add;
exports.PI = void 0;
var PI = 3.14;
exports.PI = PI;
function add(x, y) {
return x + y;
}转换后的 app.es5.js 文件内容如下：
"use strict";
var _math = require("./math.js");
console.log(_math.PI);
console.log((0, _math.add)(1, 2));转换后的代码可以在 IE11、Chrome、Firefox 等浏览器中正常运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d65fc3a941bf7134c1a9ff