建到開發(fā)與構(gòu)建部署的完整實(shí)戰(zhàn)指南)
Web框架前端【免費(fèi)下載鏈接】solid-startSolidStart, the Solid app framework項(xiàng)目地址https://gitcode.com/GitHub_Trending/so/solid-start點(diǎn)擊查看免費(fèi)下載SolidStart 是 Solid 官方推出的全棧應(yīng)用框架其核心理念是“Everything you need to build a Solid project”構(gòu)建 Solid 項(xiàng)目所需的一切。本指南以本倉庫中的最小示例工程apps/fixtures/basic為依托圍繞官方腳手架npm init solidlatest的創(chuàng)建流程、npm run dev開發(fā)流程與基于 presets 的構(gòu)建部署流程展開并深入packages/start的源碼講清 SolidStart 底層是如何組織客戶端/服務(wù)端雙環(huán)境構(gòu)建的。讀完本文你將掌握從零創(chuàng)建 SolidStart 項(xiàng)目、運(yùn)行開發(fā)服務(wù)器、理解項(xiàng)目結(jié)構(gòu)以及按目標(biāo)部署平臺配置構(gòu)建輸出環(huán)境的完整方法。SolidStart 是什么根據(jù)apps/fixtures/basic/README.md的描述SolidStart 提供構(gòu)建 Solid 項(xiàng)目所需的全部能力底層由solidjs/start包驅(qū)動對應(yīng)倉庫中的packages/start包當(dāng)前版本為 2.0.5見 packages/start/package.json。它不是一個單純的客戶端 UI 框架而是一套包含路由、服務(wù)端渲染SSR、Server Functions、中間件與部署適配的全棧解決方案。倉庫中的apps/fixtures/basic是一個精心裁剪的“最小可用示例”其規(guī)模很小但五臟俱全——文件系統(tǒng)路由、SSR 入口、客戶端水合、Vite 配置一應(yīng)俱全非常適合用來對照理解官方 README 中每一步命令背后的真實(shí)工程形態(tài)。后續(xù)所有章節(jié)都會以這個 fixture 的真實(shí)源碼作為佐證。創(chuàng)建項(xiàng)目npm init solidlatest官方腳手架命令有兩種用法原文見 apps/fixtures/basic/README.md# 在當(dāng)前目錄創(chuàng)建一個新項(xiàng)目 npm init solidlatest # 在 my-app 目錄下創(chuàng)建新項(xiàng)目 npm init solidlatest my-app不帶參數(shù)時腳手架會在當(dāng)前目錄中生成項(xiàng)目文件傳入目錄名如my-app時會新建該目錄并將項(xiàng)目生成在其中。腳手架生成的項(xiàng)目在結(jié)構(gòu)上與本倉庫的apps/fixtures/basic高度相似。以該 fixture 為樣本一個最小 SolidStart 項(xiàng)目的頂層結(jié)構(gòu)如下src/ ├── components/ # 可復(fù)用的 UI 組件如 Counter ├── routes/ # 文件系統(tǒng)路由目錄 │ ├── [...404].tsx # 404 兜底路由 │ ├── about.tsx # /about 頁面 │ └── index.tsx # / 首頁 ├── app.css ├── app.tsx # 應(yīng)用根組件 ├── entry-client.tsx # 客戶端水合入口 └── entry-server.tsx # 服務(wù)端渲染入口 ├── vite.config.ts # Vite / SolidStart / Nitro 配置 ├── tsconfig.json # TypeScript 配置含 ~/* 別名 └── package.json應(yīng)用根組件 app.tsxapps/fixtures/basic/src/app.tsx 展示了 SolidStart 應(yīng)用骨架的典型寫法用solidjs/router的Router包裹路由用solidjs/meta的MetaProvider管理文檔頭元信息并通過FileRoutes自動把src/routes/目錄映射為路由表import { MetaProvider, Title } from solidjs/meta; import { Router } from solidjs/router; import { FileRoutes } from solidjs/start/router; import { Suspense } from solid-js; import ./app.css; export default function App() { return ( Router root{props ( MetaProvider TitleSolidStart - Basic/Title a href/Index/a a href/aboutAbout/a Suspense{props.children}/Suspense /MetaProvider )} FileRoutes / /Router ); }注意FileRoutes來自solidjs/start/router導(dǎo)出這是 SolidStart 對solidjs/router的增強(qiáng)入口見 packages/start/src/router.tsx。Suspense包裹props.children是為了配合數(shù)據(jù)加載的流式 SSR。文件系統(tǒng)路由 routesfixture 中三個路由文件分別展示了三種典型場景apps/fixtures/basic/src/routes/index.tsx首頁通過TitleHello World/Title設(shè)置頁面標(biāo)題并引入Counter組件apps/fixtures/basic/src/routes/about.tsx普通頁面路徑由文件名自動推導(dǎo)為/aboutapps/fixtures/basic/src/routes/[...404].tsx通配路由[...404]兜底所有未匹配路徑并使用solidjs/start導(dǎo)出的HttpStatusCode顯式返回 404 狀態(tài)碼import { Title } from solidjs/meta; import { HttpStatusCode } from solidjs/start; export default function NotFound() { return ( main TitleNot Found/Title HttpStatusCode code{404} / h1Page Not Found/h1 /main ); }文件系統(tǒng)路由目錄默認(rèn)為src/routes這一默認(rèn)值在框架配置源碼中有明確聲明見下文“深入配置solidStart() 選項(xiàng)”。響應(yīng)式組件示例 Counterapps/fixtures/basic/src/components/Counter.tsx 是一個典型的 Solid 響應(yīng)式組件使用createSignal管理狀態(tài)配合Counter.css完成樣式import { createSignal } from solid-js; import ./Counter.css; export default function Counter() { const [count, setCount] createSignal(0); return ( button classincrement onClick{() setCount(count() 1)} typebutton Clicks: {count()} /button ); }客戶端與服務(wù)端入口SolidStart 應(yīng)用有兩個入口文件分別負(fù)責(zé)瀏覽器端水合與服務(wù)端渲染apps/fixtures/basic/src/entry-client.tsx用mount將StartClient掛載到#app節(jié)點(diǎn)完成客戶端水合與交互恢復(fù)// refresh reload import { mount, StartClient } from solidjs/start/client; mount(() StartClient /, document.getElementById(app)!);apps/fixtures/basic/src/entry-server.tsx用createHandlerStartServer定義 SSR 時的完整 HTML 文檔骨架assets注入樣式與資源、scripts注入水合腳本、children注入渲染內(nèi)容// refresh reload import { createHandler, StartServer } from solidjs/start/server; export default createHandler(() ( StartServer document{({ assets, children, scripts }) ( html langen head meta charsetutf-8 / meta nameviewport contentwidthdevice-width, initial-scale1 / link relicon href/favicon.ico / {assets} /head body div idapp{children}/div {scripts} /body /html )} / ));這兩個入口文件的名字entry-client/entry-server會被框架自動識別見 packages/start/src/config/index.ts 中的handlers組裝邏輯是 SolidStart 約定俗成的項(xiàng)目規(guī)范。路徑別名與 TypeScript 配置fixture 的 apps/fixtures/basic/tsconfig.json 定義了~/*指向./src/*的路徑別名app.tsx中import Counter from ~/components/Counter即依賴此配置并引入solidjs/start/env環(huán)境類型{ compilerOptions: { jsx: preserve, jsxImportSource: solid-js, strict: true, types: [solidjs/start/env], paths: { ~/*: [./src/*] } } }開發(fā)npm run dev按官方 README 的流程創(chuàng)建項(xiàng)目并安裝依賴npm install、pnpm install或yarn均可后即可啟動開發(fā)服務(wù)器npm run dev # 或者啟動服務(wù)器并在新瀏覽器標(biāo)簽頁中打開應(yīng)用 npm run dev -- --opennpm run dev啟動帶熱更新HMR的開發(fā)服務(wù)器附加-- --open會在啟動后自動用默認(rèn)瀏覽器打開應(yīng)用頁面。在本倉庫的 monorepo 中fixture 的腳本定義在 apps/fixtures/basic/package.jsonscripts: { dev: vite dev, build: vite build }即開發(fā)服務(wù)器本質(zhì)上由 Vite 驅(qū)動vite dev。SolidStart 以 Vite 插件的形式接入構(gòu)建體系核心插件在 apps/fixtures/basic/vite.config.ts 中注冊import { nitro } from nitro/vite; import { defineConfig } from vite; import { solidStart } from ../../../packages/start/src/config; export default defineConfig({ plugins: [solidStart(), nitro()], });這里可以看到兩個關(guān)鍵插件solidStart()來自solidjs/start的config子路徑導(dǎo)出即 packages/start/src/config/index.ts 的solidStart函數(shù)負(fù)責(zé)文件系統(tǒng)路由、Server Functions 轉(zhuǎn)換、SSR 環(huán)境與客戶端環(huán)境編排等核心邏輯nitro()來自 NitroNode 服務(wù)端運(yùn)行時框架的 Vite 插件負(fù)責(zé)服務(wù)端運(yùn)行時與部署適配這也是 README 中“presets構(gòu)建預(yù)設(shè)”機(jī)制的基礎(chǔ)。注意當(dāng)前版本框架的配置入口已經(jīng)從早期的app.config.js遷移到vite.config.ts——源碼中SolidStartOptions的注釋明確寫著 “Configuration options for SolidStart (previously inapp.config.ts)” 并給出遷移指引見 packages/start/src/config/index.ts。因此本倉庫環(huán)境下所有框架配置都應(yīng)寫在vite.config.ts的solidStart(...)選項(xiàng)中。構(gòu)建與部署presets 機(jī)制官方 README 關(guān)于構(gòu)建的核心原文是Solid apps are built withpresets, which optimise your project for deployment to different environments. By default,npm run buildwill generate a Node app that you can run withnpm start. To use a different preset, add it to thedevDependenciesinpackage.jsonand specify in yourapp.config.js.翻譯成操作要點(diǎn)如下構(gòu)建目標(biāo)由 preset 決定Solid 應(yīng)用使用“預(yù)設(shè)preset”來針對不同部署環(huán)境優(yōu)化產(chǎn)物默認(rèn)產(chǎn)物是 Node 應(yīng)用npm run build默認(rèn)生成可在 Node 環(huán)境運(yùn)行的產(chǎn)物隨后用npm start啟動切換 preset 的方法把對應(yīng) preset 包加入package.json的devDependencies并在框架配置舊版為app.config.js當(dāng)前版本為vite.config.ts中指定。結(jié)合本倉庫源碼可以進(jìn)一步理解 preset 機(jī)制的落地方式部署適配由 Nitro 承擔(dān)nitro()插件接收并解析部署預(yù)設(shè)如 Node 服務(wù)器、邊緣運(yùn)行時、各云平臺適配器等。從apps/landing-page/src/components/icons/platform/目錄下的圖標(biāo)集可以看到SolidStart 生態(tài)覆蓋的部署平臺包括 AWS、Azure、Bun、Cloudflare、Deno、Netlify、Vercel 等構(gòu)建產(chǎn)物分客戶端/服務(wù)端兩套輸出在solidStart()的config鉤子中packages/start/src/config/index.ts框架通過 Vite 8 的多環(huán)境environments能力同時構(gòu)建兩個環(huán)境客戶端環(huán)境client輸出到dist/clientwrite: true、生成manifest并對路由做 tree-shaking 與按文件命名的 chunk 拆分服務(wù)端環(huán)境serverssr: true輸出到dist/server不復(fù)制 public 目錄copyPublicDir: false由 Nitro 進(jìn)一步打包為可部署的服務(wù)端產(chǎn)物。也就是說“npm run build生成一個 Node 應(yīng)用”這條默認(rèn)行為在源碼層面體現(xiàn)為先由 Vite 構(gòu)建出dist/client的靜態(tài)資源與dist/server的 SSR 服務(wù)端代碼再由 Nitro 按所選 preset 將其適配為對應(yīng)平臺的產(chǎn)物。構(gòu)建命令本身即 fixture 中配置的vite build。在 monorepo 環(huán)境中根 package.json 也提供了便捷的構(gòu)建/測試入口例如pnpm run build構(gòu)建所有packages/*、vite-ecosystem-ci:build使用pnpm --filter fixture-basic build單獨(dú)構(gòu)建 basic fixture可作為在倉庫內(nèi)復(fù)現(xiàn)構(gòu)建流程的參考。另外注意環(huán)境要求fixture 與packages/start都聲明了node: 24見 apps/fixtures/basic/package.json 與 packages/start/package.json倉庫根還要求pnpm11.17.0運(yùn)行前請確認(rèn)本機(jī) Node 與包管理器版本滿足要求。深入配置solidStart() 選項(xiàng)solidStart(options)函數(shù)packages/start/src/config/index.ts接收一個SolidStartOptions對象下面列出與構(gòu)建、路由、渲染方式直接相關(guān)的核心選項(xiàng)及源碼中聲明的默認(rèn)值選項(xiàng)默認(rèn)值說明appRoot./src應(yīng)用根目錄即app.tsx/app.jsx所在目錄routeDir./routes文件系統(tǒng)路由目錄相對于appRootssrtrue是否開啟服務(wù)端渲染設(shè)為false則進(jìn)入純客戶端渲染的 SPA 模式此時框架會把solidjs/start/server、solidjs/start/client自動重定向到server/spa、client/spa實(shí)現(xiàn)devOverlaytrue開發(fā)模式下是否顯示 SolidStart 的錯誤浮層extensions[js, jsx, ts, tsx]被識別為路由的文件擴(kuò)展名框架還會自動追加你傳入的額外擴(kuò)展名experimental.islandsfalse實(shí)驗(yàn)性 islands 架構(gòu)開關(guān)當(dāng)前固定為false尚未完整支持serialization.modejsonServer Function / Action 載荷的序列化模式j(luò)son兼容 CSP可用JSON.parse反序列化或js基于 Seroval 的二進(jìn)制格式更高效但客戶端反序列化依賴eval()middleware無可選中間件模塊路徑模塊需用createMiddleware導(dǎo)出來自solidjs/start/middleware幾個值得展開的細(xì)節(jié)SSR 與 SPA 的切換將ssr: false傳入后框架在resolve.alias中把服務(wù)端/客戶端入口替換為 SPA 專用實(shí)現(xiàn)見 packages/start/src/server/spa/index.tsx 與 packages/start/src/client/spa/index.tsx這是官方 README 中“presets 優(yōu)化不同環(huán)境部署”之外的另一種形態(tài)優(yōu)化路由識別機(jī)制fsRoutes插件會同時實(shí)例化SolidStartClientFileRouter與SolidStartServerFileRouter兩套文件系統(tǒng)路由器packages/start/src/config/fs-router.ts分別收集客戶端與服務(wù)端視角的路由清單構(gòu)建時據(jù)此生成按路由拆分的產(chǎn)物環(huán)境類型與邊界模塊框架還內(nèi)置了server-only/client-only邊界模塊boundaryModules插件在錯誤的一側(cè)導(dǎo)入會被直接報錯攔截這是保證全棧代碼安全拆分的基礎(chǔ)設(shè)施。寫在最后從npm init solidlatest的腳手架生成到npm run dev的即時開發(fā)體驗(yàn)再到基于 presets 的構(gòu)建部署流程SolidStart 把“構(gòu)建 Solid 項(xiàng)目所需的一切”抽象成了簡單清晰的命令與約定。通過對照apps/fixtures/basic這個最小示例與packages/start的插件源碼你可以清楚地看到這些命令背后實(shí)際發(fā)生的事情文件系統(tǒng)路由如何被收集、SSR 與客戶端水合如何組織、Vite 的多環(huán)境構(gòu)建如何產(chǎn)出dist/client與dist/server兩套產(chǎn)物以及 Nitro 預(yù)設(shè)如何決定最終部署形態(tài)。掌握了這一條從命令到源碼的主線無論是繼續(xù)閱讀 packages/start/README.md 的官方說明還是深入 packages/start/src/config/index.ts 研究插件實(shí)現(xiàn)都會事半功倍。贊分享Web框架前端【免費(fèi)下載鏈接】solid-startSolidStart, the Solid app framework項(xiàng)目地址https://gitcode.com/GitHub_Trending/so/solid-start點(diǎn)擊查看免費(fèi)下載相關(guān)推薦UmiJS 快速上手從安裝、創(chuàng)建頁面到構(gòu)建部署的完整實(shí)戰(zhàn)指南UmiJS 快速上手從安裝、創(chuàng)建頁面到構(gòu)建部署的完整實(shí)戰(zhàn)指南 導(dǎo)讀 本文是 UmiJSumi的官方快速上手指南面向第一次接觸該框架的開發(fā)者。你將跟隨本文前端開發(fā)工具SolidStart 上手全指南從 npm init 項(xiàng)目創(chuàng)建到 Preset 構(gòu)建部署SolidStart 上手全指南從 npm init 項(xiàng)目創(chuàng)建到 Preset 構(gòu)建部署 SolidStart 是 Solid 官方推出的全棧應(yīng)用框架把細(xì)粒Web框架前端umi 快速上手React 應(yīng)用從安裝、開發(fā)到構(gòu)建部署的完整實(shí)戰(zhàn)指南umi 快速上手React 應(yīng)用從安裝、開發(fā)到構(gòu)建部署的完整實(shí)戰(zhàn)指南 本文基于當(dāng)前倉庫中 umi 的官方文檔 docs/README.md https://前端開發(fā)工具上一篇Node.js v26.4.0Current發(fā)布說明深度解析package maps、node:vfs 子系統(tǒng)與連接管理新能力下一篇DeepSeek-V4.1-Flash 昇騰950 CANN 推理優(yōu)化實(shí)踐共享壓縮 KV、FP4/FP8 混合精度與 Engram 記憶的端到端落地創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 SolidStart 快速上手：從腳手架創(chuàng)建到開發(fā)與構(gòu)建部署的完整實(shí)戰(zhàn)指南
Web框架前端【免費(fèi)下載鏈接】solid-startSolidStart, the Solid app framework項(xiàng)目地址https://gitcode.com/GitHub_Trending/so/solid-start點(diǎn)擊查看免費(fèi)下載SolidStart 是 Solid 官方推出的全棧應(yīng)用框架其核心理念是“Everything you need to build a Solid project”構(gòu)建 Solid 項(xiàng)目所需的一切。本指南以本倉庫中的最小示例工程apps/fixtures/basic為依托圍繞官方腳手架npm init solidlatest的創(chuàng)建流程、npm run dev開發(fā)流程與基于 presets 的構(gòu)建部署流程展開并深入packages/start的源碼講清 SolidStart 底層是如何組織客戶端/服務(wù)端雙環(huán)境構(gòu)建的。讀完本文你將掌握從零創(chuàng)建 SolidStart 項(xiàng)目、運(yùn)行開發(fā)服務(wù)器、理解項(xiàng)目結(jié)構(gòu)以及按目標(biāo)部署平臺配置構(gòu)建輸出環(huán)境的完整方法。SolidStart 是什么根據(jù)apps/fixtures/basic/README.md的描述SolidStart 提供構(gòu)建 Solid 項(xiàng)目所需的全部能力底層由solidjs/start包驅(qū)動對應(yīng)倉庫中的packages/start包當(dāng)前版本為 2.0.5見 packages/start/package.json。它不是一個單純的客戶端 UI 框架而是一套包含路由、服務(wù)端渲染SSR、Server Functions、中間件與部署適配的全棧解決方案。倉庫中的apps/fixtures/basic是一個精心裁剪的“最小可用示例”其規(guī)模很小但五臟俱全——文件系統(tǒng)路由、SSR 入口、客戶端水合、Vite 配置一應(yīng)俱全非常適合用來對照理解官方 README 中每一步命令背后的真實(shí)工程形態(tài)。后續(xù)所有章節(jié)都會以這個 fixture 的真實(shí)源碼作為佐證。創(chuàng)建項(xiàng)目npm init solidlatest官方腳手架命令有兩種用法原文見 apps/fixtures/basic/README.md# 在當(dāng)前目錄創(chuàng)建一個新項(xiàng)目 npm init solidlatest # 在 my-app 目錄下創(chuàng)建新項(xiàng)目 npm init solidlatest my-app不帶參數(shù)時腳手架會在當(dāng)前目錄中生成項(xiàng)目文件傳入目錄名如my-app時會新建該目錄并將項(xiàng)目生成在其中。腳手架生成的項(xiàng)目在結(jié)構(gòu)上與本倉庫的apps/fixtures/basic高度相似。以該 fixture 為樣本一個最小 SolidStart 項(xiàng)目的頂層結(jié)構(gòu)如下src/ ├── components/ # 可復(fù)用的 UI 組件如 Counter ├── routes/ # 文件系統(tǒng)路由目錄 │ ├── [...404].tsx # 404 兜底路由 │ ├── about.tsx # /about 頁面 │ └── index.tsx # / 首頁 ├── app.css ├── app.tsx # 應(yīng)用根組件 ├── entry-client.tsx # 客戶端水合入口 └── entry-server.tsx # 服務(wù)端渲染入口 ├── vite.config.ts # Vite / SolidStart / Nitro 配置 ├── tsconfig.json # TypeScript 配置含 ~/* 別名 └── package.json應(yīng)用根組件 app.tsxapps/fixtures/basic/src/app.tsx 展示了 SolidStart 應(yīng)用骨架的典型寫法用solidjs/router的Router包裹路由用solidjs/meta的MetaProvider管理文檔頭元信息并通過FileRoutes自動把src/routes/目錄映射為路由表import { MetaProvider, Title } from solidjs/meta; import { Router } from solidjs/router; import { FileRoutes } from solidjs/start/router; import { Suspense } from solid-js; import ./app.css; export default function App() { return ( Router root{props ( MetaProvider TitleSolidStart - Basic/Title a href/Index/a a href/aboutAbout/a Suspense{props.children}/Suspense /MetaProvider )} FileRoutes / /Router ); }注意FileRoutes來自solidjs/start/router導(dǎo)出這是 SolidStart 對solidjs/router的增強(qiáng)入口見 packages/start/src/router.tsx。Suspense包裹props.children是為了配合數(shù)據(jù)加載的流式 SSR。文件系統(tǒng)路由 routesfixture 中三個路由文件分別展示了三種典型場景apps/fixtures/basic/src/routes/index.tsx首頁通過TitleHello World/Title設(shè)置頁面標(biāo)題并引入Counter組件apps/fixtures/basic/src/routes/about.tsx普通頁面路徑由文件名自動推導(dǎo)為/aboutapps/fixtures/basic/src/routes/[...404].tsx通配路由[...404]兜底所有未匹配路徑并使用solidjs/start導(dǎo)出的HttpStatusCode顯式返回 404 狀態(tài)碼import { Title } from solidjs/meta; import { HttpStatusCode } from solidjs/start; export default function NotFound() { return ( main TitleNot Found/Title HttpStatusCode code{404} / h1Page Not Found/h1 /main ); }文件系統(tǒng)路由目錄默認(rèn)為src/routes這一默認(rèn)值在框架配置源碼中有明確聲明見下文“深入配置solidStart() 選項(xiàng)”。響應(yīng)式組件示例 Counterapps/fixtures/basic/src/components/Counter.tsx 是一個典型的 Solid 響應(yīng)式組件使用createSignal管理狀態(tài)配合Counter.css完成樣式import { createSignal } from solid-js; import ./Counter.css; export default function Counter() { const [count, setCount] createSignal(0); return ( button classincrement onClick{() setCount(count() 1)} typebutton Clicks: {count()} /button ); }客戶端與服務(wù)端入口SolidStart 應(yīng)用有兩個入口文件分別負(fù)責(zé)瀏覽器端水合與服務(wù)端渲染apps/fixtures/basic/src/entry-client.tsx用mount將StartClient掛載到#app節(jié)點(diǎn)完成客戶端水合與交互恢復(fù)// refresh reload import { mount, StartClient } from solidjs/start/client; mount(() StartClient /, document.getElementById(app)!);apps/fixtures/basic/src/entry-server.tsx用createHandlerStartServer定義 SSR 時的完整 HTML 文檔骨架assets注入樣式與資源、scripts注入水合腳本、children注入渲染內(nèi)容// refresh reload import { createHandler, StartServer } from solidjs/start/server; export default createHandler(() ( StartServer document{({ assets, children, scripts }) ( html langen head meta charsetutf-8 / meta nameviewport contentwidthdevice-width, initial-scale1 / link relicon href/favicon.ico / {assets} /head body div idapp{children}/div {scripts} /body /html )} / ));這兩個入口文件的名字entry-client/entry-server會被框架自動識別見 packages/start/src/config/index.ts 中的handlers組裝邏輯是 SolidStart 約定俗成的項(xiàng)目規(guī)范。路徑別名與 TypeScript 配置fixture 的 apps/fixtures/basic/tsconfig.json 定義了~/*指向./src/*的路徑別名app.tsx中import Counter from ~/components/Counter即依賴此配置并引入solidjs/start/env環(huán)境類型{ compilerOptions: { jsx: preserve, jsxImportSource: solid-js, strict: true, types: [solidjs/start/env], paths: { ~/*: [./src/*] } } }開發(fā)npm run dev按官方 README 的流程創(chuàng)建項(xiàng)目并安裝依賴npm install、pnpm install或yarn均可后即可啟動開發(fā)服務(wù)器npm run dev # 或者啟動服務(wù)器并在新瀏覽器標(biāo)簽頁中打開應(yīng)用 npm run dev -- --opennpm run dev啟動帶熱更新HMR的開發(fā)服務(wù)器附加-- --open會在啟動后自動用默認(rèn)瀏覽器打開應(yīng)用頁面。在本倉庫的 monorepo 中fixture 的腳本定義在 apps/fixtures/basic/package.jsonscripts: { dev: vite dev, build: vite build }即開發(fā)服務(wù)器本質(zhì)上由 Vite 驅(qū)動vite dev。SolidStart 以 Vite 插件的形式接入構(gòu)建體系核心插件在 apps/fixtures/basic/vite.config.ts 中注冊import { nitro } from nitro/vite; import { defineConfig } from vite; import { solidStart } from ../../../packages/start/src/config; export default defineConfig({ plugins: [solidStart(), nitro()], });這里可以看到兩個關(guān)鍵插件solidStart()來自solidjs/start的config子路徑導(dǎo)出即 packages/start/src/config/index.ts 的solidStart函數(shù)負(fù)責(zé)文件系統(tǒng)路由、Server Functions 轉(zhuǎn)換、SSR 環(huán)境與客戶端環(huán)境編排等核心邏輯nitro()來自 NitroNode 服務(wù)端運(yùn)行時框架的 Vite 插件負(fù)責(zé)服務(wù)端運(yùn)行時與部署適配這也是 README 中“presets構(gòu)建預(yù)設(shè)”機(jī)制的基礎(chǔ)。注意當(dāng)前版本框架的配置入口已經(jīng)從早期的app.config.js遷移到vite.config.ts——源碼中SolidStartOptions的注釋明確寫著 “Configuration options for SolidStart (previously inapp.config.ts)” 并給出遷移指引見 packages/start/src/config/index.ts。因此本倉庫環(huán)境下所有框架配置都應(yīng)寫在vite.config.ts的solidStart(...)選項(xiàng)中。構(gòu)建與部署presets 機(jī)制官方 README 關(guān)于構(gòu)建的核心原文是Solid apps are built withpresets, which optimise your project for deployment to different environments. By default,npm run buildwill generate a Node app that you can run withnpm start. To use a different preset, add it to thedevDependenciesinpackage.jsonand specify in yourapp.config.js.翻譯成操作要點(diǎn)如下構(gòu)建目標(biāo)由 preset 決定Solid 應(yīng)用使用“預(yù)設(shè)preset”來針對不同部署環(huán)境優(yōu)化產(chǎn)物默認(rèn)產(chǎn)物是 Node 應(yīng)用npm run build默認(rèn)生成可在 Node 環(huán)境運(yùn)行的產(chǎn)物隨后用npm start啟動切換 preset 的方法把對應(yīng) preset 包加入package.json的devDependencies并在框架配置舊版為app.config.js當(dāng)前版本為vite.config.ts中指定。結(jié)合本倉庫源碼可以進(jìn)一步理解 preset 機(jī)制的落地方式部署適配由 Nitro 承擔(dān)nitro()插件接收并解析部署預(yù)設(shè)如 Node 服務(wù)器、邊緣運(yùn)行時、各云平臺適配器等。從apps/landing-page/src/components/icons/platform/目錄下的圖標(biāo)集可以看到SolidStart 生態(tài)覆蓋的部署平臺包括 AWS、Azure、Bun、Cloudflare、Deno、Netlify、Vercel 等構(gòu)建產(chǎn)物分客戶端/服務(wù)端兩套輸出在solidStart()的config鉤子中packages/start/src/config/index.ts框架通過 Vite 8 的多環(huán)境environments能力同時構(gòu)建兩個環(huán)境客戶端環(huán)境client輸出到dist/clientwrite: true、生成manifest并對路由做 tree-shaking 與按文件命名的 chunk 拆分服務(wù)端環(huán)境serverssr: true輸出到dist/server不復(fù)制 public 目錄copyPublicDir: false由 Nitro 進(jìn)一步打包為可部署的服務(wù)端產(chǎn)物。也就是說“npm run build生成一個 Node 應(yīng)用”這條默認(rèn)行為在源碼層面體現(xiàn)為先由 Vite 構(gòu)建出dist/client的靜態(tài)資源與dist/server的 SSR 服務(wù)端代碼再由 Nitro 按所選 preset 將其適配為對應(yīng)平臺的產(chǎn)物。構(gòu)建命令本身即 fixture 中配置的vite build。在 monorepo 環(huán)境中根 package.json 也提供了便捷的構(gòu)建/測試入口例如pnpm run build構(gòu)建所有packages/*、vite-ecosystem-ci:build使用pnpm --filter fixture-basic build單獨(dú)構(gòu)建 basic fixture可作為在倉庫內(nèi)復(fù)現(xiàn)構(gòu)建流程的參考。另外注意環(huán)境要求fixture 與packages/start都聲明了node: 24見 apps/fixtures/basic/package.json 與 packages/start/package.json倉庫根還要求pnpm11.17.0運(yùn)行前請確認(rèn)本機(jī) Node 與包管理器版本滿足要求。深入配置solidStart() 選項(xiàng)solidStart(options)函數(shù)packages/start/src/config/index.ts接收一個SolidStartOptions對象下面列出與構(gòu)建、路由、渲染方式直接相關(guān)的核心選項(xiàng)及源碼中聲明的默認(rèn)值選項(xiàng)默認(rèn)值說明appRoot./src應(yīng)用根目錄即app.tsx/app.jsx所在目錄routeDir./routes文件系統(tǒng)路由目錄相對于appRootssrtrue是否開啟服務(wù)端渲染設(shè)為false則進(jìn)入純客戶端渲染的 SPA 模式此時框架會把solidjs/start/server、solidjs/start/client自動重定向到server/spa、client/spa實(shí)現(xiàn)devOverlaytrue開發(fā)模式下是否顯示 SolidStart 的錯誤浮層extensions[js, jsx, ts, tsx]被識別為路由的文件擴(kuò)展名框架還會自動追加你傳入的額外擴(kuò)展名experimental.islandsfalse實(shí)驗(yàn)性 islands 架構(gòu)開關(guān)當(dāng)前固定為false尚未完整支持serialization.modejsonServer Function / Action 載荷的序列化模式j(luò)son兼容 CSP可用JSON.parse反序列化或js基于 Seroval 的二進(jìn)制格式更高效但客戶端反序列化依賴eval()middleware無可選中間件模塊路徑模塊需用createMiddleware導(dǎo)出來自solidjs/start/middleware幾個值得展開的細(xì)節(jié)SSR 與 SPA 的切換將ssr: false傳入后框架在resolve.alias中把服務(wù)端/客戶端入口替換為 SPA 專用實(shí)現(xiàn)見 packages/start/src/server/spa/index.tsx 與 packages/start/src/client/spa/index.tsx這是官方 README 中“presets 優(yōu)化不同環(huán)境部署”之外的另一種形態(tài)優(yōu)化路由識別機(jī)制fsRoutes插件會同時實(shí)例化SolidStartClientFileRouter與SolidStartServerFileRouter兩套文件系統(tǒng)路由器packages/start/src/config/fs-router.ts分別收集客戶端與服務(wù)端視角的路由清單構(gòu)建時據(jù)此生成按路由拆分的產(chǎn)物環(huán)境類型與邊界模塊框架還內(nèi)置了server-only/client-only邊界模塊boundaryModules插件在錯誤的一側(cè)導(dǎo)入會被直接報錯攔截這是保證全棧代碼安全拆分的基礎(chǔ)設(shè)施。寫在最后從npm init solidlatest的腳手架生成到npm run dev的即時開發(fā)體驗(yàn)再到基于 presets 的構(gòu)建部署流程SolidStart 把“構(gòu)建 Solid 項(xiàng)目所需的一切”抽象成了簡單清晰的命令與約定。通過對照apps/fixtures/basic這個最小示例與packages/start的插件源碼你可以清楚地看到這些命令背后實(shí)際發(fā)生的事情文件系統(tǒng)路由如何被收集、SSR 與客戶端水合如何組織、Vite 的多環(huán)境構(gòu)建如何產(chǎn)出dist/client與dist/server兩套產(chǎn)物以及 Nitro 預(yù)設(shè)如何決定最終部署形態(tài)。掌握了這一條從命令到源碼的主線無論是繼續(xù)閱讀 packages/start/README.md 的官方說明還是深入 packages/start/src/config/index.ts 研究插件實(shí)現(xiàn)都會事半功倍。贊分享Web框架前端【免費(fèi)下載鏈接】solid-startSolidStart, the Solid app framework項(xiàng)目地址https://gitcode.com/GitHub_Trending/so/solid-start點(diǎn)擊查看免費(fèi)下載相關(guān)推薦UmiJS 快速上手從安裝、創(chuàng)建頁面到構(gòu)建部署的完整實(shí)戰(zhàn)指南UmiJS 快速上手從安裝、創(chuàng)建頁面到構(gòu)建部署的完整實(shí)戰(zhàn)指南 導(dǎo)讀 本文是 UmiJSumi的官方快速上手指南面向第一次接觸該框架的開發(fā)者。你將跟隨本文前端開發(fā)工具SolidStart 上手全指南從 npm init 項(xiàng)目創(chuàng)建到 Preset 構(gòu)建部署SolidStart 上手全指南從 npm init 項(xiàng)目創(chuàng)建到 Preset 構(gòu)建部署 SolidStart 是 Solid 官方推出的全棧應(yīng)用框架把細(xì)粒Web框架前端umi 快速上手React 應(yīng)用從安裝、開發(fā)到構(gòu)建部署的完整實(shí)戰(zhàn)指南umi 快速上手React 應(yīng)用從安裝、開發(fā)到構(gòu)建部署的完整實(shí)戰(zhàn)指南 本文基于當(dāng)前倉庫中 umi 的官方文檔 docs/README.md https://前端開發(fā)工具上一篇Node.js v26.4.0Current發(fā)布說明深度解析package maps、node:vfs 子系統(tǒng)與連接管理新能力下一篇DeepSeek-V4.1-Flash 昇騰950 CANN 推理優(yōu)化實(shí)踐共享壓縮 KV、FP4/FP8 混合精度與 Engram 記憶的端到端落地創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考