模块化的 require 和 import的区别

Posted 2020-12-18 cupid10

模块化的 require 和 import的区别

区别

1. require是commonjs的规范，在node中实现的api，import是es的语法，由编译器处理。所以import可以做模块依赖的静态分析，配合webpack、rollup等可以做treeshaking。
2. commonjs导出的值会复制一份，require引入的是复制之后的值（引用类型只复制引用），es module导出的值是同一份（不包括export default），不管是基础类型还是应用类型。
3. 写法上有差别，import可以使用import * 引入全部的export，也可以使用import aaa, { bbb}的方式分别引入default和非default的export，相比require更灵活

3、模块中有定时器改变了导出的值，导出的值会不会变？

// a.js
let a = 1
setTimeout(() => {
  a = 2
}, 1000)
module.exports = a

// test.js
const a = require(‘./a‘)
setTimeout(() => {
  console.log(a)   //2
}, 2000)

// a2.js
let a = 1
setTimeout(() => {
  a = 2
}, 1000)
export {
  a
}

// test2.js
import { a } from ‘./a2‘

setTimeout(() => {
  console.log(a)  //1 
}, 2000)

结果是import引入的值是2，而require引入的值一直是1，这也是require和imort很重要的一个区别，es module的export导出的值会静态的绑定，而commonjs exports导出的值是一个对象，会复制一份。这样也就出现了这样的现象。