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

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

【免费下载链接】viteNext generation frontend tooling. It's 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 dev

npm run dev

以开发模式启动 Vite 开发服务器，脚本内容就是裸的vite。启动后访问http://localhost:5173即可在浏览器中查看应用。开发模式下具备按需编译与 HMR（热模块替换）能力——模板示例组件的页面上也明确写着「Editsrc/App.tsxand save to testHMR」，即编辑组件文件保存后即可验证热更新效果。

npm run build

npm 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 preview

package.json中第三个脚本是vite preview，用于在本地以生产服务器模式预览npm run build的输出结果，方便部署前验证。

依赖构成

package.json 的完整依赖清单（以当前仓库为准）：

另有两个与运行时无关但值得注意的字段："private": true表示该模板生成的项目不会意外发布到 npm；"type": "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": "bundler"+"module": "esnext"：按「有打包器」的模式解析模块，匹配 Vite 的真实解析行为；
• "jsx": "preserve"+"jsxImportSource": "solid-js"：这是 Solid 模板最关键的 TS 设置——TypeScript 只做类型检查、不转译 JSX（转译交给vite-plugin-solid），并且把 JSX 工厂函数的类型解析指向solid-js，使tsx中的元素类型推断基于 Solid 而非 React；
• "verbatimModuleSyntax": true：要求显式区分import与import type，避免打包器意外保留类型导入；
• "moduleDetection": "force"：所有文件一律视为模块，与 ESM-only 的 Vite 管线一致；
• "noEmit": true：tsc只检查不产出，产物完全由 Vite 负责；
• "noUnusedLocals"/"noUnusedParameters"/"noFallthroughCasesInSwitch"：默认开启的一组严格 lint 选项。

"include": ["src"]限定该子项目只检查源码目录。

tsconfig.node.json：Node 侧配置

tsconfig.node.json 只包含一个文件——vite.config.ts：

• "module": "nodenext"：配置文件运行在 Node 环境，按 Node 的规则解析；
• "types": ["node"]：因此它依赖@types/node；
• 其余如noEmit、verbatimModuleSyntax等与应用侧保持一致。

这种「应用/Node 双工程」拆分避免了把 Node 类型泄漏进浏览器代码（或反之），是tsc -b能分项目独立增量检查的基础。

入口链路：从 index.html 到 Signal 演示

index.html 与挂载

index.html 是标准 Vite SPA 骨架：<div id="root"></div>作为挂载点，<script type="module" src="/src/index.tsx">以 ES 模块方式引入应用入口。

src/index.tsx：render 与 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 的响应式核心——信号（Signal）：

import { createSignal } from 'solid-js' function App() { const [count, setCount] = createSignal(0) return ( <button type="button" class="counter" 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 下如何正确运行」的三个关键点都固化为可直接查看的默认值：

1. 插件层：vite.config.ts中一行solid()完成 JSX 转换接入（vite.config.ts）；
2. 类型层：jsx: preserve+jsxImportSource: solid-js让 TypeScript 只做检查、把编译交给插件，同时类型推断走 Solid（tsconfig.app.json）；
3. 流程层：dev提供 5173 端口的开发服务器与 HMR，build以tsc -b && vite build保证「类型检查通过才允许产出」，preview支持本地预演生产产物（package.json）。

以此模板为起点，你可以按 Vite 指南 与 插件使用文档 逐步叠加路由、测试与部署等能力。

【免费下载链接】viteNext generation frontend tooling. It's fast!项目地址: https://gitcode.com/GitHub_Trending/vi/vite