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