今天的越寫悅快樂之系列文章爲大家帶來如何使用Snowpack快速開啓一個Svelte項目，Svelte作爲一個新晉的前端框架，已經發布就引起了巨大的反響，我們需要知道它是如何工作也需要知道它解決了哪些痛點，這樣便於我們進一步去知曉它能幹什麼，不能幹什麼，接下來讓我們一起看看如何通過Snowpack開啓一個Svelte項目。
Snowpack是什麼
Snowpack是一個用於現代瀏覽器的新一代快速的前端構建工具。
Snowpack有什麼特點
作爲前端打包的一員，我們看看它有什麼特色，或者說我們把它可以應用到哪些場景。
- 快速啓動
- 打包一次，永久緩存
- 熱更新
- 開箱支持JSX 、TypeScript、React、Preact、CSS Modules等
- 內置的生產環境打包優化
- 廣泛的插件支持
開啓一個Svelte項目
我們從Snowpack的官方倉庫中可以看到，create-snowpack-app中集成了如何開始一個Svelte項目，那麼我們使用這個命令來生成項目，執行如下命令：
npx create-snowpack-app svelte-snowpack-go --template @snowpack/app-template-svelte --use-yarn --no-install
執行完以上命令後，我們可以在當前文件夾下看到生成了svelte-snowpack-go目錄，此時執行以下命令並使用VSCode打開項目：
cd svelte-snowpack-go
code -r .
我們瀏覽一下項目的結果如下：
運行
在我們項目的package.json文件中可以看到運行運行的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"
}
}
執行yarn start命令即可啓動項目：
yarn start
執行結果如下：
參考
個人收穫及總結
看到前端出現這麼多的構建工具，比如Webpack、Snowpack、Vite、ESBuild等，我們很高興開源社區構建這麼優秀的軟件，讓我們盡情地發揮前端的優勢，擴展端的邊界，讓我們對瀏覽器、工程化、Low Code有了更多的思考和後續的深入實踐，我相信未來的十年更是前端更好的十年，也是我們把握產品方向和服務戰略的試驗場。技術無邊界，我更希望和開源社區的同行有更多的溝通和思想碰撞。若是我的文章對你有所啓發，那將是我莫大的榮幸。希望和您一起精進，成爲更好的自己。