黑马程序员技术交流社区

标题: 【西安校区】require和import的区别 [打印本页]

作者: 逆风TO 时间: 2020-5-19 15:39
标题: 【西安校区】require和import的区别
谈一下require和import的区别

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)的结果。
模块中有定时器改变了导出的值，导出的值会不会变

[JavaScript] 纯文本查看 复制代码

//a.js

let a = 1;

setTimeout(() => {

    a = 2;

}, 1000)

module.exports = a;

[JavaScript] 纯文本查看 复制代码

//test.js

const a = require('./a');



setTimeout(() => {

    console.log(a);

}, 2000);

[JavaScript] 纯文本查看 复制代码

//a2.js

let a = 1;

setTimeout(() => {

    a = 2;

}, 1000)

export { 

    a

};

[JavaScript] 纯文本查看 复制代码

//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的规范，一个是语言的语法，所以后者可以做静态分析，基于这个实现treeshking，同时es module会静态的绑定导出的值，而commonjs会复制一份。但两者都会做缓存，所以不会有循环引用问题。

转载自链接：https://juejin.im/post/5ec212f15188256d7b1ede72

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2