前言

發(fā)布了超過(guò) 40 個(gè) Beta 版本和候選版本之后，我們很高興地宣布，Snowpack 2.0 在今天正式發(fā)布了。

Snowpack 2.0 是一套為現(xiàn)代 Web 打造的構(gòu)建系統(tǒng)。其特性包括：

• 啟動(dòng)時(shí)間不到 50ms，在大型項(xiàng)目中速度也不會(huì)打折扣。
• 無(wú)打包開(kāi)發(fā)與生產(chǎn)構(gòu)建打包。
• 內(nèi)置對(duì) TypeScript、JSX 和 CSS 模塊等特性的支持。
• 可與 React、Preact、Vue、Svelte 和所有你喜歡的庫(kù)一起使用。
• Create Snowpack App（CSA）入門模板：
  • https://www.snowpack.dev/#create-snowpack-app-(csa)

# install with npm 
npm install --save-dev snowpack 
# install with yarn 
yarn add --dev snowpack 

邁向 Snowpack 2.0 之路

Snowpack 1.0 是針對(duì)一個(gè)簡(jiǎn)單任務(wù)而設(shè)計(jì)的：安裝 npm 軟件可以直接在瀏覽器中運(yùn)行。它背后的理念是，JavaScript 包是在開(kāi)發(fā)過(guò)程中唯一 需要 使用打包器（bundler）的東西；只要能去掉這個(gè)要求，不再需要打包器，我們就能加快所有人的 Web 開(kāi)發(fā)速度。

結(jié)果 Snowpack 大獲成功。成千上萬(wàn)的開(kāi)發(fā)人員開(kāi)始使用 Snowpack 來(lái)安裝他們的依賴項(xiàng)，簡(jiǎn)化了構(gòu)建網(wǎng)站時(shí)使用的工具鏈。一夜之間，一種速度更快，更輕量級(jí)的開(kāi)發(fā)環(huán)境呈現(xiàn)在人們面前。

Snowpack 2.0 則是為了這個(gè) Web 開(kāi)發(fā)的新時(shí)代而設(shè)計(jì)的構(gòu)建系統(tǒng)。Snowpack 利用原生 ES 模塊（ESM）支持，將構(gòu)建好的文件直接提供給瀏覽器，這樣你的開(kāi)發(fā)環(huán)境就不再需要打包器了。它不僅是一種速度更快的工具，更是一種全新的 Web 構(gòu)建系統(tǒng)和構(gòu)建方法。

O(1) 構(gòu)建系統(tǒng)的興起

打包（bundling）是一種復(fù)雜度為 O(n) 的過(guò)程。當(dāng)你更改一個(gè)文件時(shí)，你不能只重建這個(gè)文件。你往往需要針對(duì)多個(gè)相關(guān)文件，重建并重新打包應(yīng)用程序中的一整塊內(nèi)容，這樣才能正確完成更改過(guò)程。

Snowpack 則是一個(gè)復(fù)雜度為 O(1) 的構(gòu)建系統(tǒng)。這個(gè)術(shù)語(yǔ)最初是由 Ives van Hoorne 提出的，它完美地體現(xiàn)了我們的 Web 開(kāi)發(fā)未來(lái)愿景。用 Snowpack 構(gòu)建的每個(gè)文件都可以表示為一個(gè)函數(shù)：build(file) => result。在開(kāi)發(fā)過(guò)程中更改某個(gè)文件時(shí)，只需重建這一個(gè)文件就夠了。

與傳統(tǒng)的打包開(kāi)發(fā)方法相比，它有諸多優(yōu)點(diǎn)：

• O(1) 構(gòu)建速度更快。
• O(1) 構(gòu)建是可預(yù)測(cè)的。
• O(1) 構(gòu)建易于推理和配置。
• 項(xiàng)目規(guī)模不會(huì)影響開(kāi)發(fā)期間的構(gòu)建時(shí)間。
• 單個(gè)文件能更好地緩存。

最后一點(diǎn)很關(guān)鍵：每個(gè)構(gòu)建的文件都會(huì)單獨(dú)緩存，可隨時(shí)重用。如果你從不更改某個(gè)文件，那就永遠(yuǎn)用不著重新構(gòu)建它了。

dev：更快的開(kāi)發(fā)環(huán)境

運(yùn)行 snowpack dev 就可以啟動(dòng)新的 Web 開(kāi)發(fā)環(huán)境了，你會(huì)注意到的第一件事，就是 O(1) 構(gòu)建工具鏈的速度竟然如此之快。Snowpack 的啟動(dòng)時(shí)間不到 50 毫秒。這里的單位沒(méi)寫錯(cuò)：是不超過(guò) 50 毫秒。

因?yàn)闊o(wú)需啟動(dòng)打包工作，所以服務(wù)器可以立即啟動(dòng)。在首次加載頁(yè)面時(shí)，Snowpack 會(huì)構(gòu)建你請(qǐng)求的第一批文件，然后將它們緩存起來(lái)以備將來(lái)使用。就算你的項(xiàng)目中包含一百萬(wàn)個(gè)不同的文件，Snowpack 也只會(huì)構(gòu)建加載當(dāng)前頁(yè)面所需的那些文件而已。這就是為什么 Snowpack 能夠一直提供飛快的運(yùn)行速度。

snowpack dev 包括一個(gè)開(kāi)箱即用的開(kāi)發(fā)服務(wù)器，和一系列熟悉的功能：

• TypeScript 支持
• JSX 支持
• 熱模塊更換（HMR）
• 導(dǎo)入 CSS 和 CSS 模塊
• 導(dǎo)入圖像和其他資產(chǎn)
• 自定義路由
• 代理請(qǐng)求

自定義構(gòu)建

使用 Snowpack 內(nèi)置的構(gòu)建腳本，你就可以連接自己喜歡的那些構(gòu)建工具。

https://www.snowpack.dev/#build-scripts

在 Snowpack 中，你可以將每個(gè)構(gòu)建表示為一個(gè)線性的"輸入 ->構(gòu)建 ->輸出"工作流程。這樣一來(lái)，Snowpack 便可以將文件納入任何現(xiàn)有的 UNIX-y CLI 工具的管道，或者從管道中提取出來(lái)，而無(wú)需專門的插件生態(tài)系統(tǒng)支持。

// snowpack.config.json 
{ 
"scripts": { 
// Pipe every "*.css" file through the PostCSS CLI 
// stdin (source file) > postcss > stdout (build output) 
"build:css": "postcss", 
} 
} 

如果你用過(guò) package.json 的“scripts”配置，應(yīng)該會(huì)很熟悉這種格式。我們很喜歡這種直接使用 CLI，而無(wú)需非必要插件系統(tǒng)的簡(jiǎn)單方法。我們希望這種模式能提供與之類似的直觀設(shè)計(jì)。

如果你想更好地掌控自己的構(gòu)建（或者想編寫自己的構(gòu)建工具），Snowpack 還支持第三方 JavaScript 插件

https://www.snowpack.dev/#build-plugins

可以查看我們的文檔以了解有關(guān)自定義構(gòu)建的更多信息

https://www.snowpack.dev/#build-scripts

bulid 為生產(chǎn)環(huán)境打包

需要明確的是，Snowpack 并不反對(duì)生產(chǎn)環(huán)境中的打包。實(shí)際上我們推薦這種方法。在打包過(guò)程中的文件縮小、壓縮、移除無(wú)用代碼和網(wǎng)絡(luò)優(yōu)化等操作，都能讓你的站點(diǎn)運(yùn)行得更快，給用戶帶來(lái)更好的體驗(yàn)；這也是所有構(gòu)建工具的終極目標(biāo)。

Snowpack 將打包視為一種只用在最后一步，且只針對(duì)生產(chǎn)環(huán)境的構(gòu)建優(yōu)化過(guò)程。將打包放在最后一步后，你就不會(huì)將構(gòu)建邏輯和打包邏輯混在同一個(gè)巨大的配置文件中了。相比之下，你的打包器可以獲取已構(gòu)建好的文件，并專注于它最擅長(zhǎng)的工作：打包。

Snowpack 維護(hù)了一套針對(duì) Webpack 和 Parcel 的官方插件。你可以選擇自己喜歡的那一款，然后運(yùn)行 snowpack build 來(lái)構(gòu)建生產(chǎn)站點(diǎn)。

// snowpack.config.json 
{ 
  // Optimize your production builds with Webpack 
  "plugins": [["@snowpack/plugin-webpack", {/* ... */}]] 
} 

如果你不想使用打包器也是可以的。Snowpack 的默認(rèn)構(gòu)建將為你提供一個(gè)沒(méi)有打包過(guò)的網(wǎng)站，它運(yùn)行起來(lái)也不會(huì)有任何問(wèn)題。這就是 Snowpack 項(xiàng)目從一開(kāi)始就堅(jiān)持的理念：你想用打包器的時(shí)候才會(huì)用它，不想用的時(shí)候就可以不用，沒(méi)有硬性要求。

現(xiàn)在就嘗試 Snowpack

我們很高興能和大家分享所有這些內(nèi)容，現(xiàn)在就下載 Snowpack，體驗(yàn) Web 開(kāi)發(fā)的未來(lái)吧。

npm i snowpack@latest --save-dev 

如果你已經(jīng)裝過(guò) Snowpack 應(yīng)用程序，那么 Snowpack 2.0 會(huì)引導(dǎo)你更新那些過(guò)時(shí)的配置。Snowpack 原來(lái)的軟件包安裝程序仍然可以正常運(yùn)行，而且現(xiàn)在有了新的 dev 和 build 命令，Snowpack 甚至可以為你管理 Web 軟件包。

請(qǐng)查看我們的文檔站點(diǎn)以了解更多信息

https://www.snowpack.dev/

創(chuàng)建 Snowpack 應(yīng)用

入門 Snowpack 的最簡(jiǎn)單方法是使用 Create Snowpack App（CSA）模板。CSA 使用預(yù)先配置的，由 Snowpack 驅(qū)動(dòng)的開(kāi)發(fā)環(huán)境為你自動(dòng)初始化一個(gè)入門應(yīng)用程序。

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 社區(qū)提供的模板：

https://github.com/pikapkg/create-snowpack-app

感謝超過(guò) 80 位貢獻(xiàn)者為新版做出的努力，編程愉快！