深入了解前端模塊化
大廠技術(shù)??堅(jiān)持周更??精選好文
前言
本篇是關(guān)于前端模塊化的文章，主要關(guān)注于理解什么是模塊化，為什么要模塊化，模塊化規(guī)范的優(yōu)缺點(diǎn)以及模塊化規(guī)范的演變歷程，讓大家對(duì)模塊化編程有一個(gè)更加清晰的理解和認(rèn)識(shí)，這樣在對(duì)后續(xù)一些概念進(jìn)行學(xué)習(xí)時(shí)會(huì)有更深刻的認(rèn)識(shí)與理解(比如為什么會(huì)出現(xiàn)tree-shaking呀等等)。
什么是模塊化？
什么是"模塊"?，比較簡(jiǎn)單的理解就是將一個(gè)工程項(xiàng)目代碼依據(jù)一定的規(guī)則封裝成多個(gè)模塊(文件)，這些模塊又通過(guò)向外提供一些方法與其他模塊形成一種依賴的關(guān)系。從廣義上來(lái)說(shuō)的話，又可以將我們的工程項(xiàng)目里的模塊歸納于內(nèi)部的模塊，項(xiàng)目引入調(diào)用的那些外部的包(package)則可以歸納為外部的模塊。
外部模塊的管理
2009年Node.js的創(chuàng)立使Javascript不再局限于前端，同時(shí)還成為了一門(mén)后端語(yǔ)言，我們可以使用Node.js獨(dú)立開(kāi)發(fā)App的后臺(tái)，創(chuàng)建靜態(tài)資源服務(wù)器，也可將它作為開(kāi)發(fā)的工具將我們的代碼編譯轉(zhuǎn)換為瀏覽器兼容的格式。一年之后Node.js模塊管理工具npm(node package manager)的發(fā)布則顛覆了我們對(duì)外部模塊的使用方式。
NPM之前對(duì)外部模塊的使用
在npm發(fā)布之前，我們?cè)陧?xiàng)目中如果需要使用某個(gè)外部模塊，可能需要去包的官網(wǎng)直接把文件下載下來(lái)放到我們的項(xiàng)目里，然后再在html里通過(guò)