深入浅出 solid.js 源码 (二十九)—— 一些模板

220 阅读2分钟

这是我参与「掘金日新计划 · 8 月更文挑战」的第29天,点击查看活动详情

我们创建 solid 工程时通常会使用一些预置的模板,solid 的模板工程位于 github.com/solidjs/tem… ,提供了一些常见的模板工程,我们可以参考这些来组织自己的工程。通常我们会使用 cli 工具进行工程初始化,这些 cli 工具会为我们创建工程。不过 solid 并没有提供这样的 cli 工具,我们可以看到文档上推荐的做法是使用 degit 工具来复制模板。

degit 是一个开源项目,位于 github.com/Rich-Harris… Rich-Harris 的又一个优秀作品,Rich-Harris 就是前面提到过的 svelte 和 rollup 的作者。degit 延续了其一贯的简介设计思想,它给我们提供了一个非常方便的复制模板的方法。

没有 degit,我们想复制一个模板 git 仓库,我们需要 git clone,但是这样有一个问题,git 仓库中有 .git 存储文件历史,但是我们使用模板通常是不需要这个历史记录的,因此这样的操作实际上是会有浪费的。degit 就是移除 git,使用 degit 复制的模板更加纯粹,它只是复制模板本身,不会携带任何无关的 git 信息。具体的实现和介绍可以去查看 degit 仓库。

我们可以看到 solid 提供的模板仓库都是基于 vite 的,vite 是 vue 作者的有一个优秀的作品,它是一个非常好用的现代化构建工具,在开发模式基于 module 构建,不需要打包,可以极大程度提升效率,vite 提供了非常完整的功能,对 vite 感兴趣可以去阅读 vite 仓库,非常推荐使用 vite 来构建项目。这里 solid 也提供了对 vite 的充分支持,solid 封装了 vite 版本的构建插件 vite-plugin-solid,可以快速配置基于 vite 的 solid 开发环境。

template 仓库中还包含了一些常见的用法,比如 typescript 如何配置,tailwindcss 如何配置,vitest 如何配置,router 如何配置等,我们可以根据需要选择模板工程,如果想要添加其他内容,也可以去对应的模板中查询相关的写法,对于开发者而言 template 仓库是非常重要的辅助仓库。