今天的越寫悅快樂之系列文章為大家?guī)砣绾问褂肧nowpack快速開啟一個(gè)Svelte項(xiàng)目，Svelte作為一個(gè)新晉的前端框架，已經(jīng)發(fā)布就引起了巨大的反響，我們需要知道它是如何工作也需要知道它解決了哪些痛點(diǎn)，這樣便于我們進(jìn)一步去知曉它能干什么，不能干什么，接下來讓我們一起看看如何通過Snowpack開啟一個(gè)Svelte項(xiàng)目。
Snowpack是什么
Snowpack是一個(gè)用于現(xiàn)代瀏覽器的新一代快速的前端構(gòu)建工具。
Snowpack有什么特點(diǎn)
作為前端打包的一員，我們看看它有什么特色，或者說我們把它可以應(yīng)用到哪些場景。
- 快速啟動(dòng)
- 打包一次，永久緩存
- 熱更新
- 開箱支持JSX 、TypeScript、React、Preact、CSS Modules等
- 內(nèi)置的生產(chǎn)環(huán)境打包優(yōu)化
- 廣泛的插件支持
開啟一個(gè)Svelte項(xiàng)目
我們從Snowpack的官方倉庫中可以看到，create-snowpack-app中集成了如何開始一個(gè)Svelte項(xiàng)目，那么我們使用這個(gè)命令來生成項(xiàng)目，執(zhí)行如下命令：
npx create-snowpack-app svelte-snowpack-go --template @snowpack/app-template-svelte --use-yarn --no-install
執(zhí)行完以上命令后，我們可以在當(dāng)前文件夾下看到生成了svelte-snowpack-go目錄，此時(shí)執(zhí)行以下命令并使用VSCode打開項(xiàng)目：
cd svelte-snowpack-go
code -r .
我們?yōu)g覽一下項(xiàng)目的結(jié)果如下：
運(yùn)行
在我們項(xiàng)目的package.json文件中可以看到運(yùn)行運(yùn)行的scripts命令如下：
{
"scripts": {
"start": "snowpack dev",
"build": "snowpack build",
"test": "web-test-runner \"src/**/*.test.js\""
},
"dependencies": {
"svelte": "^3.24.0"
},
"devDependencies": {
"@snowpack/plugin-dotenv": "^2.0.5",
"@snowpack/plugin-svelte": "^3.5.0",
"@snowpack/web-test-runner-plugin": "^0.2.0",
"@testing-library/svelte": "^3.0.0",
"@web/test-runner": "^0.12.0",
"chai": "^4.2.0",
"snowpack": "^3.0.1"
}
}
執(zhí)行yarn start命令即可啟動(dòng)項(xiàng)目：
yarn start
執(zhí)行結(jié)果如下：
參考
個(gè)人收獲及總結(jié)
看到前端出現(xiàn)這么多的構(gòu)建工具，比如Webpack、Snowpack、Vite、ESBuild等，我們很高興開源社區(qū)構(gòu)建這么優(yōu)秀的軟件，讓我們盡情地發(fā)揮前端的優(yōu)勢，擴(kuò)展端的邊界，讓我們對(duì)瀏覽器、工程化、Low Code有了更多的思考和后續(xù)的深入實(shí)踐，我相信未來的十年更是前端更好的十年，也是我們把握產(chǎn)品方向和服務(wù)戰(zhàn)略的試驗(yàn)場。技術(shù)無邊界，我更希望和開源社區(qū)的同行有更多的溝通和思想碰撞。若是我的文章對(duì)你有所啟發(fā)，那將是我莫大的榮幸。希望和您一起精進(jìn)，成為更好的自己。
