前言
在exports 和 module.exports这篇博客中,我们详细解释了在 CommonJS 规范中exports
和module.exports
的区别。本篇博客将讨论 CommonJS 规范和 ES6 规范模块导出之间的关系。
export 和 export default
ES6 导出模块一般会使用export
或export default
,使用两者的语法在 javaScript 文档中的ES6 Module已经做了详细的讲解,此处不再赘述。那么为什么已经有了export
还要整个export default
呢?export
和export 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 代码。