Snowpack - 图片来自我的手机
今天的越写悦快乐之系列文章为大家带来如何使用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有了更多的思考和后续的深入实践，我相信未来的十年更是前端更好的十年，也是我们把握产品方向和服务战略的试验场。技术无边界，我更希望和开源社区的同行有更多的沟通和思想碰撞。若是我的文章对你有所启发，那将是我莫大的荣幸。希望和您一起精进，成为更好的自己。
网友评论