Skip to main content

One post tagged with "export default"

View All Tags

· 6 min read
Robbie Han

前言

exports 和 module.exports这篇博客中,我们详细解释了在 CommonJS 规范中exportsmodule.exports的区别。本篇博客将讨论 CommonJS 规范和 ES6 规范模块导出之间的关系。

export 和 export default

ES6 导出模块一般会使用exportexport default,使用两者的语法在 javaScript 文档中的ES6 Module已经做了详细的讲解,此处不再赘述。那么为什么已经有了export还要整个export default呢?exportexport default之间的关系是什么呢?下面的内容也将通过这两个问题进行展开。

为什么已经有了 export 还要整个 export default 呢?

在 ES6 模块中,如果模块导出中使用export var name = 'Robbie',那么在导入改模块的时候,导入的变量必须与之相对应,即import {name} form Info。而export default name在模块导入时的导入变量的命名可是任意的import myName form Info。对比两者来看使用export default可能具有更高的灵活性,也更便于不熟悉该库的开发者进行开发。

export 和 export default 之间的关系是什么呢?

我们知道浏览器是不支持 ES6 模块语法的,所以对于代码中的 ES6 模块一般是采用 Babel 转成 CommonJS 规范的代码。此时的代码虽然浏览器仍然不能执行,但是 Node 可以,因为 webpack 是基于 Node 构建的,所以我们可以通过 webpack 将代码打包成浏览器支持的 ES5 代码。