一個可代替 Webpack 的構(gòu)建工具：Snowpack
Webpack是過去幾年中最受歡迎的JavaScript構(gòu)建打包工具之一，這正是得益于它靈活的構(gòu)建配置以及豐富的官方支持的第三方插件。
Webpack 的主要功能是將你所有的 JavaScript 文件，連帶所有從 NPM 導(dǎo)入的模塊、圖片、CSS 和其他網(wǎng)絡(luò)資源，全部打包到一個可以被瀏覽器執(zhí)行的文件中。
Webpack 也是一個復(fù)雜的打包工具，學(xué)習(xí)曲線也比較陡峭，因為它的靈活性意味著它有非常多的功能來應(yīng)對各種不同的使用場景。更進(jìn)一步講，哪怕只是對一個文件進(jìn)行了很小的改動，Webpack 會將你的整個 JavaScript 應(yīng)用重新打包和構(gòu)建。如果對 Webpack 的工作原理理解不到位，構(gòu)建一個應(yīng)用時可能要等半小時以上。
Webpack 是 2014 年發(fā)布的。在那個時候，瀏覽器基本不支持 ECMAScript Module (ESM) 的 import 和 export 語法，所以在瀏覽器中運行 JavaScript 的方式只能是將項目中所有的模塊全部打包進(jìn)一個文件。
這其中還包括其他的流程，比如使用 Babel 將 JavaScript 從較新版本轉(zhuǎn)換為稍舊版本，以便瀏覽器可以運行該應(yīng)用。使用 Webpack 最主要的目的是創(chuàng)造最好的開發(fā)體驗，讓 JavaScript 開發(fā)者可以使用最新的功能(ES6+)。
如今 ESM 語法已經(jīng)被所有主流瀏覽器支持，所以將你所有的 JavaScript 文件打包在一起已經(jīng)不是在瀏覽器中運行應(yīng)用的必要條件了。
使用 Snowpack，無需進(jìn)行打包配置
Snowpack 是一個 JavaScript 構(gòu)建工具，它利用了瀏覽器對 ESM 的支持，讓我們可以構(gòu)建單個文件并將其發(fā)送到瀏覽器中。每一個被構(gòu)建的文件都會被緩存，在我們每修改一個文件時，只有這一個文件會被 Snowpack 重新構(gòu)建。
Snowpack 的開發(fā)服務(wù)器也做了優(yōu)化，它只會在瀏覽器請求后構(gòu)建該文件。這使得 Snowpack 可以即時啟動(小于 50 毫秒)并且擴展到大型項目時也不會增加啟動速度。我自己做嘗試時啟動服務(wù)器只用了 35 毫秒。
Snowpack 的構(gòu)建過程
Snowpack 默認(rèn)會將你的未打包應(yīng)用部署到生產(chǎn)環(huán)境，但是你也要進(jìn)行一些構(gòu)建相關(guān)的優(yōu)化，比如最小化、代碼分割、tree-shaking、懶加載等等。
Snowpack 同時支持通過插件連接 Webpack 來打包生產(chǎn)版本的應(yīng)用。這樣，由于 Snowpack 已經(jīng)轉(zhuǎn)譯了你的代碼，你的打包工具(Webpack)只需要將常規(guī)的 HTML、CSS 和 JavaScript 文件打包。
這也是為什么你在打包過程中不需要復(fù)雜的 Webpack 配置文件。
最后，你也可以設(shè)置 package.json 中的 browserslist 屬性，來設(shè)定支持的瀏覽器版本：
- /* package.json */
- "browserslist": ">0.75%, not ie 11, not UCAndroid >0, not OperaMini all",
在你執(zhí)行 snowpack build 指令來構(gòu)建生產(chǎn)環(huán)境的項目時，該屬性會自動被應(yīng)用。Snowpack 不會在構(gòu)建開發(fā)版本時執(zhí)行任何轉(zhuǎn)譯，所以這不是一個問題，因為大部分時間你都會在最新的瀏覽器版本下開發(fā)。
上手 Snowpack
要開始使用 Snowpack，你可以立即使用 Create Snowpack App (CSA) 和 NPX 來創(chuàng)建 Snowpack 應(yīng)用。例如，你可以用如下指令來用 CSA 新建一個初始化 React 應(yīng)用：
- npx create-snowpack-app react-snowpack --template @snowpack/app-template-react
一個新的 react-snowpack 文件夾會被創(chuàng)建，并且附帶最基礎(chǔ)的依賴：
- {
- "scripts": {
- "start": "snowpack dev",
- "build": "snowpack build",
- "test": "web-test-runner \"src/**/*.test.jsx\"",
- "format": "prettier --write \"src/**/*.{js,jsx}\"",
- "lint": "prettier --check \"src/**/*.{js,jsx}\""
- },
- "dependencies": {
- "react": "^17.0.0",
- "react-dom": "^17.0.0"
- },
- "devDependencies": {
- "@snowpack/plugin-dotenv": "^2.0.5",
- "@snowpack/plugin-react-refresh": "^2.4.0",
- "@snowpack/web-test-runner-plugin": "^0.2.0",
- "@testing-library/react": "^11.0.0",
- "@web/test-runner": "^0.12.0",
- "chai": "^4.2.0",
- "prettier": "^2.0.5",
- "snowpack": "^3.0.1"
- }
- }
你立即就可以使用 npm start 指令運行這個應(yīng)用。本地的調(diào)試服務(wù)器會在 8080 端口運行。CSA 的 React 模板和 Create React App 的默認(rèn)模板非常相似：
Snowpack 支持主流庫的 許多官方模板，如 React、Vue 和 Svelte。你只需要在指令中加入 --template 選項。
結(jié)語
你使用一個打包工具時應(yīng)該是因為你想要使用它，而不是因為你需要使用它 —— Snowpack 官方文檔
Webpack 和 Snowpack 的發(fā)布相隔了數(shù)年，盡管 Webpack 一直是打包 JavaScript 模塊時人氣最高的選擇，但瀏覽器對 ESM 模塊的支持開創(chuàng)了一種新的開發(fā) Web 應(yīng)用的方式。
伴隨著不打包開發(fā)以及開發(fā)中快速構(gòu)建應(yīng)用的能力，Snowpack 將成為一個激動人心的 Webpack 替代品，它讓我們可以更輕松地開發(fā) JavaScript 應(yīng)用。與此同時，它還能讓你利用 Webpack 打包生產(chǎn)版本，對你的應(yīng)用實現(xiàn)構(gòu)建優(yōu)化。
觀看Snowpack 的官方文檔，可了解更多。
原文：https://blog.bitsrc.io/snowpack-an-alternative-build-tool-to-webpack-9e8da197071d
