模組化的 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匯出的值是一個物件，會複製一份。這樣也就出現了這樣的現象。