Snowpack - 更快的前端構建工具

最近開發項目，偶然間發現了Snowpack這個庫，它在開發環境中使用原生 ES 模塊標準引入 js 文件，這讓我眼前一亮，自己我就對前端標準的發展十分感興趣，因此就閱讀了一下文檔。javascript

更快的前端構建工具html

Snowpack 在開發環境中使用原生 ES 模塊代替以往的打包方式，每個文件只須要構建一次並緩存，當某個文件改變時 Snowpack 只會從新構建這個被改動的文件並經過模塊熱替換（HMR）技術更新變動。前端

在生產環境打包時，Snowpack 能夠集成其餘打包工具，好比 Webpack。vue

關鍵功能java

更快的開發速度，開發服務器能夠在 50ms 之內啓動
利用模塊熱替換（HMR）技術，代碼的變動能夠更快的在瀏覽器中體現出來
在打包生產環境時，能夠結合其餘相似 Webpack 這樣的打包工具使用
內置了對 TypeScript，JSX，CSS Module 等功能，開箱即用
提供插件的方式提供對相似 Babel，Vue 等第三方庫的支持

Snowpack 的工做原理

歸納#

Snowpack 是一種現代、輕量級的構建工具，用於加快 Web 開發。 每次保存單個文件時，像 webpack 和 Parcel 這樣的傳統 JavaScript 構建工具都須要從新構建和從新打包整個應用程序塊。這個從新捆綁步驟會在點擊保存更改和在瀏覽器中看到它們之間引入延遲。node

在開發過程當中， Snowpack 爲您的應用程序提供未捆綁的服務。每一個文件只須要構建一次，而後永久緩存。當文件更改時，Snowpack 會重建該單個文件。無需浪費時間從新捆綁每一個更改，只需在瀏覽器中進行即時更新（經過熱模塊更換 (HMR)速度更快）。您能夠在咱們的Snowpack 2.0 發佈帖子中閱讀有關此方法的更多信息。react

Snowpack 的非捆綁開發仍然支持您用於生產的相同捆綁構建。當您爲生產構建應用程序時，您能夠經過 Webpack 或 Rollup（即將推出）的官方 Snowpack 插件插入您最喜歡的捆綁器。因爲 Snowpack 已經在處理您的構建，所以不須要複雜的打包器配置。webpack

Snowpack 爲您提供一箭雙鵰： 快速、非捆綁式開發，在捆綁式生產版本中優化性能。git

非捆綁開發#

非捆綁開發是在開發過程當中將單個文件傳送到瀏覽器的想法。仍然可使用您喜歡的工具（如 Babel、TypeScript、Sass）構建文件，而後經過 ESMimport和export語法在瀏覽器中單獨加載依賴項。每當您更改文件時，Snowpack 只會重建該文件。github

另外一種選擇是捆綁開發。 當今幾乎全部流行的 JavaScript 構建工具都專一於捆綁開發。經過捆綁器運行您的整個應用程序會給您的開發工做流程帶來額外的工做和複雜性，如今 ESM 獲得普遍支持，這些工做是沒必要要的。每一次更改——每次保存時——都必須與應用程序的其他部分從新綁定，而後您的更改才能反映在瀏覽器中。

與傳統的捆綁開發方法相比，非捆綁開發有幾個優勢：

單文件構建速度很快。
單文件構建是肯定性的。
單文件構建更容易調試。
項目大小不會影響開發速度。
單個文件緩存更好。

最後一點是關鍵：每一個文件都是單獨構建並沒有限期緩存。 您的開發環境永遠不會屢次構建文件，您的瀏覽器永遠不會下載文件兩次（直到它發生變化）。這就是非捆綁開發的真正力量。

使用 NPM 依賴#

NPM 包主要使用模塊語法（Common.js 或 CJS）發佈，若是沒有一些構建處理就沒法在 Web 上運行。即便您使用瀏覽器原生 ESMimport和export直接在瀏覽器中運行的語句編寫應用程序，嘗試導入任何一個 npm 包都會迫使您從新進行捆綁開發。

Snowpack 採起了不一樣的方法：Snowpack不是針對這一要求捆綁整個應用程序，而是單獨處理您的依賴項。這是它的工做原理：

node_modules/react/**/*     -> http://localhost:3000/web_modules/react.js
node_modules/react-dom/**/* -> http://localhost:3000/web_modules/react-dom.js
複製代碼

Snowpack 會掃描您的網站/應用程序以查找全部使用過的 npm 包。
Snowpack 從您的node_modules目錄中讀取這些已安裝的依賴項。
Snowpack 將您的全部依賴項單獨捆綁到單個 JavaScript 文件中。例如：reactandreact-dom分別轉換爲react.jsand react-dom.js。
每一個生成的文件均可以直接在瀏覽器中運行，並經過 ESMimport語句導入。
因爲您的依賴項不多更改，所以 Snowpack 不多須要重建它們。

在 Snowpack 構建您的依賴項後，任何包均可以導入並直接在瀏覽器中運行，而無需額外的捆綁或工具。這種在瀏覽器中本地導入 npm 包的能力（沒有捆綁器）是全部非捆綁開發和 Snowpack 其他部分構建的基礎。

<!-- This runs directly in the browser with `snowpack dev` -->
<body>
  <script type="module"> import React from 'react'; console.log(React); </script>
</body>
複製代碼

快速開始

安裝 Snowpack#

# npm:
npm install --save-dev snowpack
# yarn:
yarn add --dev snowpack
# pnpm:
pnpm add --save-dev snowpack
複製代碼

運行 Snowpack CLI#

npx snowpack [command]
yarn run snowpack [command]
pnpm run snowpack [command]
複製代碼

在整個文檔中，咱們將使用snowpack [command]來記錄 CLI。要運行您的本地安裝積雪的版本，添加npx/ yarn run/pnpm run前綴用於安裝積雪了包管理器。

對於長期開發，使用 Snowpack 的最佳方式是使用 package.json 腳本。這減小了您本身記住確切 Snowpack 命令/配置的須要，並讓您與團隊的其餘成員共享一些經常使用腳本（若是適用）。

// Recommended: package.json scripts
// npm run start (or: "yarn run ...", "pnpm run ...")
"scripts": {
    "start": "snowpack dev",
    "build": "snowpack build"
}
複製代碼

除了 react 模版，Snowpack 還提供了其餘模板

@snowpack/app-template-blank

在本地爲您的項目提供服務#

snowpack dev
複製代碼

這將啓動本地開發服務器進行開發。默認狀況下，這會將您當前的工做目錄提供給瀏覽器，並將查找index.html要啓動的文件。您能夠經過「掛載」配置自定義要提供服務的目錄。

構建你的項目#

snowpack build
複製代碼

這會將您的項目構建到一個build/能夠在任何地方部署的靜態目錄中。您能夠經過配置自定義您的構建。

查看全部命令和選項#

snowpack --help
複製代碼

該--help標誌將顯示有用的輸出。

文中若有錯誤，歡迎在評論區指正，若是這篇文章幫到了你，歡迎點贊👍收藏加關注😊，但願點贊多多多多...