不知道你在学习别人的代码时,有没有遇见过这样的代码
const a = require(fileName).default
这里为什么没有用import
?
首先我们需要了解一下,import和require的功能是什么,他们又有什么区别。
Common JS
- 最初是为node.js作为服务端设计的版本
- 每个文件拥有独立的作用域
- 通过
module.exports
导出模块中的内容,导出是一个模块向外暴露自己的唯一方式。 - 通过
require
进行模块的导入,如果导入的模块是第一次被加载,这时会先执行该模块中的代码,然后再导出执行后的内容,如果模块曾经被加载过,则直接导出第一次加载时执行后的内容,相当是一个静态值了。
ES6模块
- 每个文件作为一个模块,每个模块有独立的作用与
- 通过
export
导出- 命名导出:
export {a,b,c}
,export { variable1 as name1, variable2 as name2, …, nameN }
- 默认导出:
export default a
,默认导出只能导出一个对象
-通过import
导入,默认导出的变量导入时可以随意命名,命名导出方式导入时必须名称必须一致,可以使用as
重新命名。
- 命名导出:
区别
Common JS对模块依赖的解决时动态的,而ES6模块时静态的。
模块导入时,CommodJS是值拷贝,而ES6则是只读的动态映射。
动态:模块的依赖关系建立在代码运行阶段
静态:模块的依赖关系建立在代码编译阶段
export default 语法糖
default
关键字,说白了,就是别名(as)的语法糖
导出
export default function() {
}
// 等效于:
function a() {
};
export {a as default};
导入
import a from './d';
// 等效于:
import {default as a} from './d';
上文提到过,export
关键字是导出一个对象,对象内存在一个属性(我们要暴露的),export default
则是 export 语法糖,import
一个export default
暴露出来的模块包含了解构赋值的步骤,所以在node中使用require
去请求一个export default
的模块需要我们通过.
语法去取出对象中的属性(因为require没有解构赋值),清晰明了。
在看最开始的代码const a = require(fileName).default
这样就显得非常清晰,我们 module.exports
的是啥,require
的就是啥。
但export default
包装了一层语法糖,让我们看得不甚清晰:
const a = 'helloworld';
export default a;
其实导出的是
{
"default": a
}
而并非 a
这个变量,这就是我为什么之前要强调语法糖了,如果你将 export default
还原为
const a = 'helloworld';
export {a as default}
那整个逻辑就十分清晰明了~