snowpack 快速開始
先準(zhǔn)備一個(gè)空目錄來創(chuàng)建項(xiàng)目
mkdir my-first-snowpackcd my-first-snowpack
初始化操作
npm init安裝依賴
npm install --save-dev snowpack創(chuàng)建一個(gè) index.html 文件。
<html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="description" content="Starter Snowpack App" /><title>Starter Snowpack Apptitle>head><body><h1>Welcome to Snowpack!h1>body>html>
在 package.json 里面添加一個(gè) start 命令來啟動(dòng)服務(wù)。
"scripts": {"start": "snowpack dev","test": "echo \"Error: no test specified\" && exit 1"},
然后運(yùn)行服務(wù)，會(huì)打開頁面。
npm run start
直接在瀏覽器中使用瀏覽器原生的 JavaScript 模塊功能。
// my-first-snowpack/hello-world.jsexport function helloWorld() {console.log('Hello World!');}
// my-first-snowpack/index.jsimport { helloWorld } from './hello-world.js';helloWorld();
在 html 里面引入 JS 文件
<body><h1>Welcome to Snowpack!h1><script type="module" src="/index.js">script>body>
修改文件頁面會(huì)自動(dòng)化刷新。除了使用自己寫的模塊，還可以使用 npm 模塊。
npm install --save canvas-confetti在 index.js 添加下面代碼
import confetti from 'canvas-confetti';confetti.create(document.getElementById('canvas'), {resize: true,useWorker: true,})({ particleCount: 200, spread: 200 });
打開頁面會(huì)出現(xiàn)一個(gè)動(dòng)畫效果。
snowpack 的一大特點(diǎn)是快 —— 全量構(gòu)建快，增量構(gòu)建也快。
因?yàn)椴恍枰虬?，所以它不需要?webpack 那樣構(gòu)筑一個(gè)巨大的依賴圖譜，并根據(jù)依賴關(guān)系進(jìn)行各種合并、拆分計(jì)算。snowpack 的增量構(gòu)建基本就是改動(dòng)一個(gè)文件就處理這個(gè)文件即可，模塊之間算是“松散”的耦合。
官方文檔：https://www.snowpack.dev/tutorials/getting-started
典型的 Web 開發(fā)人員安裝和管理他們的依賴關(guān)系是使用包管理器像 npm，yarn。這些 npm 軟件包不能直接在瀏覽器中運(yùn)行，因此在實(shí)際使用它們之前，需要額外的做處理，進(jìn)行 webpack 打包構(gòu)建。
snowpack 完全跳過“ npm install”步驟，而是通過 ES Module 導(dǎo)入，按需獲取相關(guān)的預(yù)構(gòu)建的軟件包代碼。
// 之前是這樣import * as React from 'react';// 之后是這樣import * as React from 'https://cdn.skypack.dev/[email protected]';