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