@pika/web

如今前端開發已經離不開webpack. 雖然webpack帶來不少好處,可是它繁瑣的配置以及較高的學習成本成爲了開發人員的負擔.vue-cli爲咱們作了一些基礎配置,可是會帶來另一個問題.咱們可能只是寫一個小demo,可是須要安裝一大堆沒用的第三方依賴. @pika/web在必定程度上能夠解決這些問題

---

開發模式的變換

在nodejs尚未問世的時候,咱們前端開發的模式主要是經過script標籤直接引入靜態資源,雖然這種方式有不少問題,但不得不認可這種方式是最簡單的. nodejs誕生以後,npm逐漸成爲了前端開發最大的包管理平臺. 可是瀏覽器上不能運行node模塊系統.因此npm下載下來的依賴包(node模塊系統)必須經過webpack編譯成瀏覽器能識別的文件. 這也是webpack模塊化開發很是重要的一點

---

什麼能夠替代Webpack

咱們上面說到,瀏覽器不能直接運行node模塊系統, 可是如今不少瀏覽器已經支持ES Module了

咱們如今就能夠經過scritp標籤直接飲用第三方的ES Module包.不須要配置繁瑣的Webpack了.而@pika/web就是用來替代Webpack來安裝依賴項的一個工具

---

@pika/web如何替代Webpack

• @pika/web 經過一種新的方式來安裝 npm 依賴項，可讓它們在瀏覽器中運行
• @pika/web 實際上並非一個構建工具，也不是一個打包器，而是一個依賴項安裝工具，可讓你減小對其餘工具的依賴
• @pika/web 會檢查 package.json，看看有沒有導出模塊的依賴項，而後在本地 web_modules 目錄中安裝這些依賴項
• @pika/web只針對導出es module的依賴項. 不支持Node 模塊規範的依賴項

@pika/web 會把每一個依賴都打包到一個單獨的.js 文件中。以下圖整個 dayjs包被安裝成 web_modules/dayjs.js

---

@pika/web的優缺點

• @pika/web 將打包器的複雜性封裝在了一個單獨的安裝工具中,不須要咱們去進行繁瑣的配置
• @pika/web 的依賴項安裝方式（單個 JS 文件）配合HTTP/2在性能方面具備更大的優點
• 不會由於更新某個依賴或者改動某一行代碼而從新下載整個包
• 現階段npm上ES module的包仍是挺少的.這就致使@pika/web的實際應用價值大打折扣.巧婦難爲無米之炊啊

  

---

@pika/web剛問世不久,現階段只是能夠替代Webpack處理依賴項的功能.而Webpack中處理.vue, sass等文件的功能@pika/web現階段是沒法替代的. @pika/web很是適合咱們針對某個依賴項作一些小demo的時候使用.操做簡單,也不須要複雜的配置,成本小不少