越写悦快乐之如何使用Snowpack打包Svelte项目

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

执行结果如下：

运行结果 - 图片来自我的手机

参考

• Snowpack
• Svelte

个人收获及总结

看到前端出现这么多的构建工具，比如Webpack、Snowpack、Vite、ESBuild等，我们很高兴开源社区构建这么优秀的软件，让我们尽情地发挥前端的优势，扩展端的边界，让我们对浏览器、工程化、Low Code有了更多的思考和后续的深入实践，我相信未来的十年更是前端更好的十年，也是我们把握产品方向和服务战略的试验场。技术无边界，我更希望和开源社区的同行有更多的沟通和思想碰撞。若是我的文章对你有所启发，那将是我莫大的荣幸。希望和您一起精进，成为更好的自己。