我們都知道Vue之所以這么受大眾喜愛的原因之一就是Vue的組件化開發(fā)模式笙瑟，這樣不僅提高了組件的可重用性法瑟，而且每個(gè) Vue 組件都是Vue的實(shí)例赫蛇，可接受相同的選項(xiàng)對(duì)象并提供相同的生命周期鉤子阿纤。這就讓項(xiàng)目調(diào)試起來更加簡(jiǎn)單方便揖闸，整個(gè)開發(fā)效果也更高揍堕，可維護(hù)性也更強(qiáng)，也能適合多人協(xié)同開發(fā)汤纸。我們?cè)陂喿x別人項(xiàng)目的時(shí)候經(jīng)常會(huì)看到文件中出現(xiàn)require和import衩茸，作用都是用來引入模塊化編程使用的。那么這兩個(gè)有什么區(qū)別呢贮泞？
?CommonJS的由來
在早期沒有模塊化思想時(shí)代碼沒有很好的編寫規(guī)范楞慈，導(dǎo)致很多代碼幔烛、邏輯重復(fù)、缺乏條理性且不易管理維護(hù)囊蓝，這也讓很多開發(fā)者頭疼不已饿悬。隨著JavaScript 社區(qū)的發(fā)展，社區(qū)為JavaScript制定了相應(yīng)的規(guī)范聚霜，而CommonJS規(guī)范的提出得到了大家的承認(rèn)和廣泛的應(yīng)用狡恬，2009年CommonJS就此誕生了。
CommonJS介紹
CommonJS實(shí)現(xiàn)了Javascript的模塊化規(guī)范蝎宇，規(guī)范了模塊的特性和各模塊之間的相互依賴性弟劲，使得代碼可以更好的編寫和維護(hù)，同時(shí)提高了代碼的復(fù)用性姥芥。定義每個(gè)文件都是一個(gè)模塊（module變量代表當(dāng)前模塊）并有自己的作用域兔乞，而每個(gè)文件里面定義的變量、函數(shù)撇眯、類报嵌，都是私有的，對(duì)于其他模塊是不可見熊榛。模塊的exports屬性是對(duì)外的接口锚国，只有通過exports導(dǎo)出的屬性才能被加載識(shí)別。Node就是基于CommonJs規(guī)范實(shí)現(xiàn)的玄坦，因?yàn)镃ommonJS規(guī)范加載模塊是同步的血筑，而服務(wù)器中的Node模塊都直接存儲(chǔ)在服務(wù)器本地硬盤中的，加載起來自然比較快煎楣，可以說node項(xiàng)目是CommonJs規(guī)范目前的最好實(shí)踐應(yīng)用豺总。
require
require是Node內(nèi)置的用于加載模塊文件函數(shù)，require函數(shù)可以讀取并執(zhí)行一個(gè)JavaScript文件择懂，然后返回該模塊的exports對(duì)象喻喳。module.exports變量（用于導(dǎo)出模塊），require函數(shù)（用于導(dǎo)入模塊）是CommonJS定義了兩個(gè)主要概念困曙，module.exports屬性表示當(dāng)前模塊對(duì)外輸出的接口表伦，當(dāng)其他文件通過require函數(shù)加載該模塊時(shí)實(shí)際上就是讀取module.exports中的變量。
ECMAScript 6 （簡(jiǎn)稱ES6）
ECMAScript是（European Computer Manufacturers Association Script）的縮寫慷丽，它是由ECMA國際標(biāo)準(zhǔn)化定制的一項(xiàng)JavaScript腳本語言的標(biāo)準(zhǔn)化規(guī)范蹦哼。ECMAScript 6 是ECMA在2015年發(fā)布的JavaScript 的規(guī)范標(biāo)準(zhǔn)，解決 ES5 的很多先天不足并引入了模塊化思想要糊。ES6模塊的設(shè)計(jì)思想是盡量的靜態(tài)化纲熏，使得編譯時(shí)就能確定模塊的依賴關(guān)系以及輸入和輸出的變量。
import
import是ES6中的語法標(biāo)準(zhǔn)也是用來加載模塊文件的，import函數(shù)可以讀取并執(zhí)行一個(gè)JavaScript文件局劲，然后返回該模塊的export命令指定輸出的代碼勺拣。export與export default均可用于導(dǎo)出常量、函數(shù)容握、文件宣脉、模塊，export可以有多個(gè)创译，export default只能有一個(gè)眨八。
require與import的區(qū)別
1，require是CommonJS規(guī)范的模塊化語法，import是ECMAScript 6規(guī)范的模塊化語法蛔翅；
2，require是運(yùn)行時(shí)加載哎迄，import是編譯時(shí)加載谭贪；
3，require可以寫在代碼的任意位置令花，import只能寫在文件的最頂端且不可在條件語句或函數(shù)作用域中使用阻桅；
4，require通過module.exports導(dǎo)出的值就不能再變化兼都，import通過export導(dǎo)出的值可以改變嫂沉；
5；require通過module.exports導(dǎo)出的是exports對(duì)象扮碧，import通過export導(dǎo)出是指定輸出的代碼趟章；
6，require運(yùn)行時(shí)才引入模塊的屬性所以性能相對(duì)較低慎王，import編譯時(shí)引入模塊的屬性所所以性能稍高蚓土。
require的使用
定義模塊：module變量代表當(dāng)前模塊，它的exports屬性是對(duì)外的接口赖淤。通過exports可以將模塊從模塊中導(dǎo)出蜀漆，其他文件加載該模塊實(shí)際上就是讀取module.exports變量，他們可以是變量咱旱、函數(shù)确丢、對(duì)象等。在node中如果用exports進(jìn)行導(dǎo)出的話系統(tǒng)會(huì)系統(tǒng)幫您轉(zhuǎn)成module.exports的莽龟，只是導(dǎo)出需要定義導(dǎo)出名蠕嫁。
加載模塊：require方法用于加載后綴為js的模塊文件，如果參數(shù)字符串以“/”開頭則表示加載的是絕對(duì)路徑的模塊文件毯盈，如果參數(shù)字符串以“./”開頭則表示加載的是相對(duì)路徑的模塊文件剃毒，模塊同步加載并按照J(rèn)avaScript運(yùn)行時(shí)查找的順序進(jìn)行處理。
import的使用
定義模塊：在模塊中可以使用export關(guān)鍵字可以將變量、對(duì)象赘阀、函數(shù)益缠、類等從模塊中導(dǎo)出，再通過import語句就可以使用它們基公。一個(gè)模塊中只能有一個(gè)默認(rèn)導(dǎo)出export default幅慌，但是可以有多個(gè)export導(dǎo)出。
加載模塊：import加載模板可以有多種形式轰豆，可以以整個(gè)模塊的內(nèi)容胰伍、單個(gè)接口、多個(gè)接口酸休、帶別名接口骂租、默認(rèn)值等方式載入。這樣就可以實(shí)現(xiàn)按需加載模塊模塊斑司，提高代碼的性能渗饮。
