谈谈模块化的 require 和 import
2020-08-27 14:09
1486 查看
一、区别
- require是commonjs的规范,在node中实现的api,import是es的语法,由编译器处理。所以import可以做模块依赖的静态分析,配合webpack、rollup等可以做treeshaking。
- commonjs导出的值会复制一份,require引入的是复制之后的值(引用类型只复制引用),es module导出的值是同一份(不包括export default),不管是基础类型还是应用类型。
- 写法上有差别,import可以使用import * 引入全部的export,也可以使用import aaa, { bbb}的方式分别引入default和非default的export,相比require更灵活。
二、require和import会不会循环引用?
答案是不会,因为模块执行后会把导出的值缓存,下次再require或者import不会再次执行。这样也就不会循环引用了。比如a引入了b,b引入了a,如果a再次执行那么会再引入b,那就循环起来了,但实际上会做缓存,再次引入不会再执行。可以通过require.cache来查看缓存的模块,key为require.resolve(path)的结果。
三、模块中有定时器改变了导出的值,导出的值会不会变?
[code]// a.js let a = 1 setTimeout(() => { a = 2 }, 1000) module.exports = a // test.js const a = require('./a') setTimeout(() => { console.log(a) }, 2000) // a2.js let a = 1 setTimeout(() => { a = 2 }, 1000) export { a } // test2.js import { a } from './a2' setTimeout(() => { console.log(a) }, 2000)
结果是import引入的值是2,而require引入的值一直是1,这也是require和imort很重要的一个区别,es module的export导出的值会静态的绑定,而commonjs exports导出的值是一个对象,会复制一份。这样也就出现了这样的现象。
四、总结
问 require和import的区别就是问commonjs和es module的区别,这两者一个是api的规范,一个是语言的语法,所以后者可以做静态分析,基于这个实现treeshaking,同时es module会静态的绑定导出的值,而commonjs会复制一份。但两者都会做缓存,所以不会有循环引用问题。
相关文章推荐
- 简单谈谈require模块化jquery和angular的问题
- 模块化 require和import的区别
- 模块化编程中import与require的区别
- ES6新特性:使用export和import实现模块化
- require.js实现js模块化编程(一)
- require.js实现js模块化编程(二):RequireJS Optimizer
- JS模块化编程 Require.JS
- import和require的区别
- Javascript模块化编程 require.js
- [zz]Why does Python's __import__ require fromlist?
- 利用require.js实现javascript模块化加载
- Quick中require与import的区别
- Javascript模块化编程(三):require.js的用法
- require与import的区别
- Javascript模块化编程(三):require.js的用法
- JavaScript模块化编程之require.js与sea.js
- Javascript模块化编程(三):require.js的用法
- Js模块化之-import和export
- 简单谈谈PHP中的include、include_once、require以及require_once语句
- module.exports和exports、export和export default、require和import的详解