Vite create-vite solid-ts 模板：Solid + TypeScript 项目从创建、开发到构建的完整拆解

Vite create-vite solid-ts 模板Solid TypeScript 项目从创建、开发到构建的完整拆解【免费下载链接】viteNext generation frontend tooling. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vi/vite本文基于 Vite 官方脚手架create-vite中的solid-ts模板packages/create-vite/template-solid-ts/README.md展开。读完你可以完整掌握如何用npm/pnpm/yarn安装并运行该模板、模板内置的dev/build/preview三个脚本分别做了什么、vite-plugin-solid与 TypeScript 工程化配置含 Solid JSX 编译策略是如何协同工作的以及生产构建时tsc -b vite build的完整流程。模板定位solid-ts 是什么solid-ts是 create-vite 内置的项目模板之一对应「Solid TypeScript」组合。在 create-vite 源码 中可以看到该模板的定义与展示名name: solid-ts通过脚手架命令选择该选项后仓库中 template-solid-ts 目录会被复制到本地生成一个开箱即用的 Solid 单页应用。模板目录结构如下所有文件均可在当前仓库中直接查看template-solid-ts/ ├── index.html # 应用入口 HTML ├── package.json # 依赖与 npm 脚本 ├── vite.config.ts # Vite 配置注册 solid 插件 ├── tsconfig.json # 解决方案根配置project references ├── tsconfig.app.json # 面向 src/ 的应用端 TS 配置 ├── tsconfig.node.json # 面向 vite.config.ts 的 Node 端 TS 配置 ├── README.md # 模板使用说明本文主体来源 ├── public/ │ ├── favicon.svg # 站点图标 │ └── icons.svg # SVG symbol 图标雪碧图 └── src/ ├── index.tsx # 挂载入口 ├── index.css # 全局样式含暗色主题变量 ├── App.tsx # 示例组件createSignal 计数演示 ├── App.css # 组件样式 └── assets/ ├── hero.png ├── solid.svg └── vite.svg安装与运行模板自带的 README 给出最简安装方式npm install # or pnpm install or yarn install安装完成后在模板生成的项目目录下可执行以下三个脚本定义于 package.json 的scripts字段npm run devnpm run dev以开发模式启动 Vite 开发服务器脚本内容就是裸的vite。启动后访问http://localhost:5173即可在浏览器中查看应用。开发模式下具备按需编译与 HMR热模块替换能力——模板示例组件的页面上也明确写着「Editsrc/App.tsxand save to testHMR」即编辑组件文件保存后即可验证热更新效果。npm run buildnpm run build将应用以生产模式构建到dist目录。模板会正确地把 Solid 打进生产产物并做性能优化产物经过压缩minify文件名带有内容哈希可直接部署到静态托管服务。注意该脚本的真实内容是tsc -b vite build见 package.json 第 8 行即先做 TypeScript 工程级类型检查再做 Vite 打包tsc -b按 tsconfig.json 的 project references 顺序构建/检查tsconfig.app.json与tsconfig.node.json两个子项目任何类型错误都会在此步使构建失败vite build由 Vite 完成最终的模块解析、转换、压缩与产物输出。两个阶段都通过才认为构建成功这保证提交到生产的代码一定通过了完整类型检查。npm run previewpackage.json中第三个脚本是vite preview用于在本地以生产服务器模式预览npm run build的输出结果方便部署前验证。依赖构成package.json 的完整依赖清单以当前仓库为准依赖版本范围角色solid-js^1.9.15运行时框架提供createSignal、render等 APIvite^8.2.2构建工具与开发服务器vite-plugin-solid^2.11.14让 Vite 理解并转换 Solid 的.tsx/.jsx语法typescript~6.0.2类型检查tsc -b使用波浪号精确小版本锁定types/node^24.13.3为vite.config.ts提供 Node 类型另有两个与运行时无关但值得注意的字段private: true表示该模板生成的项目不会意外发布到 npmtype: module声明项目整体使用 ESM。Vite 配置只注册一个插件模板的 vite.config.ts 极简import { defineConfig } from vite import solid from vite-plugin-solid export default defineConfig({ plugins: [solid()], })vite-plugin-solid是 Solid 与 Vite 之间的桥梁它负责在transform阶段把.tsx/.jsx中的 Solid JSX 转成 Solid 的编译产物并处理 Solid 特有的资源与 HMR 注入。除此之外模板没有配置额外的base、resolve、build等选项说明默认配置即可满足标准 Solid SPA 场景如需自定义部署路径、代理等可按 Vite 配置项文档 在此基础上扩展。TypeScript 工程三文件 references 方案模板的 TS 配置是典型的「solution-style」三文件结构这也是当前 Vite 官方脚手架各 TS 模板的通用工程化形态tsconfig.json 自身不编译任何文件只做引用聚合{ files: [], references: [ { path: ./tsconfig.app.json }, { path: ./tsconfig.node.json } ] }两个子项目分工明确tsconfig.app.json应用代码src/关键字段及含义target: es2023、lib: [ES2023, DOM]语言目标与可用库含浏览器 DOM 类型types: [vite/client]引入 Vite 客户端类型这是import heroImg from ./assets/hero.png这类静态资源导入能获得string类型而不报错的依据见下文「入口与资源导入」moduleResolution: bundlermodule: esnext按「有打包器」的模式解析模块匹配 Vite 的真实解析行为jsx: preservejsxImportSource: solid-js这是 Solid 模板最关键的 TS 设置——TypeScript 只做类型检查、不转译 JSX转译交给vite-plugin-solid并且把 JSX 工厂函数的类型解析指向solid-js使tsx中的元素类型推断基于 Solid 而非 ReactverbatimModuleSyntax: true要求显式区分import与import type避免打包器意外保留类型导入moduleDetection: force所有文件一律视为模块与 ESM-only 的 Vite 管线一致noEmit: truetsc只检查不产出产物完全由 Vite 负责noUnusedLocals/noUnusedParameters/noFallthroughCasesInSwitch默认开启的一组严格 lint 选项。include: [src]限定该子项目只检查源码目录。tsconfig.node.jsonNode 侧配置tsconfig.node.json 只包含一个文件——vite.config.tsmodule: nodenext配置文件运行在 Node 环境按 Node 的规则解析types: [node]因此它依赖types/node其余如noEmit、verbatimModuleSyntax等与应用侧保持一致。这种「应用/Node 双工程」拆分避免了把 Node 类型泄漏进浏览器代码或反之是tsc -b能分项目独立增量检查的基础。入口链路从 index.html 到 Signal 演示index.html 与挂载index.html 是标准 Vite SPA 骨架div idroot/div作为挂载点script typemodule src/src/index.tsx以 ES 模块方式引入应用入口。src/index.tsxrender 与 HMR 指令index.tsx 全文仅七行核心逻辑/* refresh reload */ import { render } from solid-js/web import ./index.css import App from ./App.tsx const root document.getElementById(root) render(() App /, root!)两个细节值得注意render(() App /, root)Solid 的render接受一个返回 JSX 的函数作为第一个参数这是 Solid 与 React 挂载方式的核心区别之一——渲染内容是惰性求值的函数而非即时求值的元素树首行注释/* refresh reload */是 Fast Refresh 指令由于入口组件App不适合局部热替换该注释告诉刷新机制在App.tsx变更时整页重载保证 HMR 语义正确。App.tsx最小 Signal 演示App.tsx 展示了 Solid 的响应式核心——信号Signalimport { createSignal } from solid-js function App() { const [count, setCount] createSignal(0) return ( button typebutton classcounter onClick{() setCount((count) count 1)} Count is {count()} /button ) }createSignal(0)返回读写对[count, setCount]count()是读端注意是函数调用读取当前值setCount是写端setCount((count) count 1)展示了函数式更新写法避免闭包过期值模板中还通过import heroImg from ./assets/hero.png演示了 Vite 的静态资源导入——由tsconfig.app.json里的types: [vite/client]提供类型支撑导入结果即运行时可用的资源 URL/icons.svg中则通过use href/icons.svg#...引用 public 目录下的 SVG symbol。样式侧index.css 用 CSS 自定义属性 prefers-color-scheme媒体查询实现暗色模式App.css 负责组件布局两者均通过import语句进入模块图由 Vite 统一处理开发下注入style标签构建时提取压缩。部署模板 README 的最后一节指向部署文档。仓库内的对应章节为 静态部署指南由于npm run build的产物是纯静态文件带哈希的 JS/CSS/资源 dist/目录部署方式与任意 Vite 静态站点一致——上传dist内容到托管服务即可若使用非根路径托管需要配合base配置调整资源前缀。小结solid-ts模板把「Solid 在 Vite 下如何正确运行」的三个关键点都固化为可直接查看的默认值插件层vite.config.ts中一行solid()完成 JSX 转换接入vite.config.ts类型层jsx: preservejsxImportSource: solid-js让 TypeScript 只做检查、把编译交给插件同时类型推断走 Solidtsconfig.app.json流程层dev提供 5173 端口的开发服务器与 HMRbuild以tsc -b vite build保证「类型检查通过才允许产出」preview支持本地预演生产产物package.json。以此模板为起点你可以按 Vite 指南 与 插件使用文档 逐步叠加路由、测试与部署等能力。【免费下载链接】viteNext generation frontend tooling. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vi/vite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考