Babel 编译 ES6 如何实现 import export

前言

随着前端技术的不断发展，ES6 成为了前端开发的主流语言之一。然而，由于浏览器对 ES6 的支持并不完善，我们需要使用 Babel 将 ES6 代码编译为 ES5 代码，以保证在各种浏览器上都能正常运行。本文将介绍如何使用 Babel 编译 ES6 中的 import 和 export。

Babel 简介

Babel 是一个 JavaScript 编译器，它可以将 ES6 代码编译为 ES5 代码，从而让我们可以在现代浏览器和旧版浏览器上运行相同的代码。Babel 可以通过插件的方式来扩展其功能，从而支持更多的语法和特性。

import 和 export

ES6 中引入了 import 和 export 关键字，用于模块化开发。import 用于导入一个模块，而 export 用于导出一个模块。例如：

// 导入模块
import { foo } from './module.js';

// 导出模块
export const foo = 'bar';

然而，由于浏览器对 ES6 的支持并不完善，我们需要使用 Babel 将 import 和 export 编译为 ES5 代码。

Babel 编译 import 和 export

Babel 提供了一个插件叫做 babel-plugin-transform-es2015-modules-commonjs，可以将 ES6 中的 import 和 export 编译为 CommonJS 模块。我们可以使用以下命令安装该插件：

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

然后，在 .babelrc 中配置该插件：

{
  "plugins": [
    "transform-es2015-modules-commonjs"
  ]
}

这样，当我们编译 ES6 代码时，Babel 就会将 import 和 export 编译为 CommonJS 模块。例如：

// 编译前
import { foo } from './module.js';

// 编译后
var _module = require('./module.js');
var foo = _module.foo;

// 编译前
export const foo = 'bar';

// 编译后
exports.foo = 'bar';

示例代码

下面是一个简单的示例，展示了如何在 ES6 中使用 import 和 export，并使用 Babel 编译为 ES5 代码：

// module.js
export const foo = 'bar';

// index.js
import { foo } from './module.js';
console.log(foo);

使用 Babel 编译后，index.js 的代码如下：

var _module = require('./module.js');
var foo = _module.foo;
console.log(foo);

总结

本文介绍了如何使用 Babel 编译 ES6 中的 import 和 export。通过使用 babel-plugin-transform-es2015-modules-commonjs 插件，我们可以将 import 和 export 编译为 CommonJS 模块，从而保证在浏览器中能够正常运行。同时，本文也提供了示例代码，让读者更好地理解如何使用 import 和 export。

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