作者 | 前端之巔
英文作者| Fred K. Schott
譯者 | 王強
策劃 | 蔡芳芳
前言釋出了超過 40 個 Beta 版本和候選版本之後，我們很高興地宣佈，Snowpack 2.0 在今天正式釋出了。
Snowpack 2.0 是一套為現代 Web 打造的構建系統。其特性包括：
啟動時間不到 50ms，在大型專案中速度也不會打折扣。無打包開發與生產構建打包。內建對 TypeScript、JSX 和 CSS 模組等特性的支援。可與 React、Preact、Vue、Svelte 和所有你喜歡的庫一起使用。Create Snowpack App（CSA）入門模板：https://www.snowpack.dev/#create-snowpack-app-(csa)# install with npmnpm install --save-dev snowpack# install with yarnyarn add --dev snowpackSnowpack 1.0 是針對一個簡單任務而設計的：安裝 npm 軟體可以直接在瀏覽器中執行。它背後的理念是，JavaScript 包是在開發過程中唯一 需要 使用打包器（bundler）的東西；只要能去掉這個要求，不再需要打包器，我們就能加快所有人的 Web 開發速度。
結果 Snowpack 大獲成功。成千上萬的開發人員開始使用 Snowpack 來安裝他們的依賴項，簡化了構建網站時使用的工具鏈。一夜之間，一種速度更快，更輕量級的開發環境呈現在人們面前。
Snowpack 2.0 則是為了這個 Web 開發的新時代而設計的構建系統。Snowpack 利用原生 ES 模組（ESM）支援，將構建好的檔案直接提供給瀏覽器，這樣你的開發環境就不再需要打包器了。它不僅是一種速度更快的工具，更是一種全新的 Web 構建系統和構建方法。
O(1) 構建系統的興起
打包（bundling）是一種複雜度為 O(n) 的過程。當你更改一個檔案時，你不能只重建這個檔案。你往往需要針對多個相關檔案，重建並重新打包應用程式中的一整塊內容，這樣才能正確完成更改過程。
Snowpack 則是一個複雜度為 O(1) 的構建系統。這個術語最初是由 Ives van Hoorne 提出的，它完美地體現了我們的 Web 開發未來願景。用 Snowpack 構建的每個檔案都可以表示為一個函式：build(file) => result。在開發過程中更改某個檔案時，只需重建這一個檔案就夠了。
與傳統的打包開發方法相比，它有諸多優點：
O(1) 構建速度更快。O(1) 構建是可預測的。O(1) 構建易於推理和配置。專案規模不會影響開發期間的構建時間。單個檔案能更好地快取。最後一點很關鍵：每個構建的檔案都會單獨快取，可隨時重用。如果你從不更改某個檔案，那就永遠用不著重新構建它了。
執行 snowpack dev 就可以啟動新的 Web 開發環境了，你會注意到的第一件事，就是 O(1) 構建工具鏈的速度竟然如此之快。Snowpack 的啟動時間不到 50 毫秒。這裡的單位沒寫錯：是不超過 50 毫秒。
因為無需啟動打包工作，所以伺服器可以立即啟動。在首次載入頁面時，Snowpack 會構建你請求的第一批檔案，然後將它們快取起來以備將來使用。就算你的專案中包含一百萬個不同的檔案，Snowpack 也只會構建載入當前頁面所需的那些檔案而已。這就是為什麼 Snowpack 能夠一直提供飛快的執行速度。
snowpack dev 包括一個開箱即用的開發伺服器，和一系列熟悉的功能：
TypeScript 支援JSX 支援熱模組更換（HMR）匯入 CSS 和 CSS 模組匯入影象和其他資產自定義路由代理請求自定義構建使用 Snowpack 內建的構建指令碼，你就可以連線自己喜歡的那些構建工具。
https://www.snowpack.dev/#build-scripts
在 Snowpack 中，你可以將每個構建表示為一個線性的"輸入 ->構建 ->輸出"工作流程。這樣一來，Snowpack 便可以將檔案納入任何現有的 UNIX-y CLI 工具的管道，或者從管道中提取出來，而無需專門的外掛生態系統支援。
// snowpack.config.json{ "scripts": { // Pipe every "*.css" file through the PostCSS CLI // stdin (source file) > postcss > stdout (build output) "build:css": "postcss", }}如果你用過 package.json 的“scripts”配置，應該會很熟悉這種格式。我們很喜歡這種直接使用 CLI，而無需非必要外掛系統的簡單方法。我們希望這種模式能提供與之類似的直觀設計。
如果你想更好地掌控自己的構建（或者想編寫自己的構建工具），Snowpack 還支援第三方 JavaScript 外掛
https://www.snowpack.dev/#build-plugins
可以檢視我們的文件以了解有關自定義構建的更多資訊
https://www.snowpack.dev/#build-scripts
需要明確的是，Snowpack 並不反對生產環境中的打包。實際上我們推薦這種方法。在打包過程中的檔案縮小、壓縮、移除無用程式碼和網路優化等操作，都能讓你的站點執行得更快，給使用者帶來更好的體驗；這也是所有構建工具的終極目標。
Snowpack 將打包視為一種只用在最後一步，且只針對生產環境的構建優化過程。將打包放在最後一步後，你就不會將構建邏輯和打包邏輯混在同一個巨大的配置檔案中了。相比之下，你的打包器可以獲取已構建好的檔案，並專注於它最擅長的工作：打包。
Snowpack 維護了一套針對 Webpack 和 Parcel 的官方外掛。你可以選擇自己喜歡的那一款，然後執行 snowpack build 來構建生產站點。
// snowpack.config.json{ // Optimize your production builds with Webpack "plugins": [["@snowpack/plugin-webpack", {/* ... */}]]}如果你不想使用打包器也是可以的。Snowpack 的預設構建將為你提供一個沒有打包過的網站，它執行起來也不會有任何問題。這就是 Snowpack 專案從一開始就堅持的理念：你想用打包器的時候才會用它，不想用的時候就可以不用，沒有硬性要求。
現在就嘗試 Snowpack我們很高興能和大家分享所有這些內容，現在就下載 Snowpack，體驗 Web 開發的未來吧。
npm i snowpack@latest --save-dev如果你已經裝過 Snowpack 應用程式，那麼 Snowpack 2.0 會引導你更新那些過時的配置。Snowpack 原來的軟體包安裝程式仍然可以正常執行，而且現在有了新的 dev 和 build 命令，Snowpack 甚至可以為你管理 Web 軟體包。
請檢視我們的文件站點以了解更多資訊
https://www.snowpack.dev/
建立 Snowpack 應用入門 Snowpack 的最簡單方法是使用 Create Snowpack App（CSA）模板。CSA 使用預先配置的，由 Snowpack 驅動的開發環境為你自動初始化一個入門應用程式。
npx create-snowpack-app new-dir --template [SELECT FROM BELOW] [--use-yarn]Snowpack 的模板包括：
@snowpack/app-template-blank@snowpack/app-template-react@snowpack/app-template-react-typescript@snowpack/app-template-preact@snowpack/app-template-svelte@snowpack/app-template-vue@snowpack/app-template-lit-element@snowpack/app-template-11ty這裡可以檢視 snowpack 社群提供的模板：
https://github.com/pikapkg/create-snowpack-app
感謝超過 80 位貢獻者為新版做出的努力，程式設計愉快！
延伸閱讀
https://www.snowpack.dev/posts/2020-05-26-snowpack-2-0-release/
作者 | 前端之巔
英文作者| Fred K. Schott
譯者 | 王強
策劃 | 蔡芳芳