web前端技術分享：詳解模組化require 和 import的區別

      在 前端開發中，我們可以使用很多模組化的庫來幫助我們更好的實現效果，有一些庫的功能類似很多同學就不知道該如何選擇，比如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更靈活。

      二、require和import會不會迴圈引用？

      答案是不會，因為模組執行後會把匯出的值快取，下次再require或者import不會再次執行。這樣也就不會迴圈引用了。比如a引入了b，b引入了a，如果a再次執行那麼會再引入b，那就迴圈起來了，但實際上會做快取，再次引入不會再執行。可以透過require.cache來檢視快取的模組，key為require.resolve(path)的結果。

      三、模組中有定時器改變了匯出的值，匯出的值會不會變？

      結果是import引入的值是2，而require引入的值一直是1，這也是require和imort很重要的一個區別，es module的export匯出的值會靜態的繫結，而commonjs exports匯出的值是一個物件，會複製一份。這樣也就出現了這樣的現象。

      四、總結

      問 require和import的區別就是問commonjs和es module的區別，這兩者一個是api的規範，一個是語言的語法，所以後者可以做靜態分析，基於這個實現treeshaking，同時es module會靜態的繫結匯出的值，而commonjs會複製一份。但兩者都會做快取，所以不會有迴圈引用問題。

      以上就是require和import的區別介紹了。最後歡迎對web前端感興趣的小夥伴關注小千，後面會繼續分享更多web前端知識。

      本文來自千鋒教育，轉載請註明出處。