[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fcreate-vite":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fcreate-vite":1370,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fcreate-vite":1394},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":13,"pinned":14,"draft":14,"body":15,"seo":1366,"stem":1367,"id":1368,"extension":1369},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fcreate-vite","create-vite","pnpm create vite 实际执行的是 npm 包 create-vite（与 vite 本体不同）。工程化背景见 工程化概览、工作原理。","技能小册",[12,8],"vite","2021-03-05",false,{"type":16,"value":17,"toc":1342},"minimark",[18,21,49,55,73,78,108,123,129,142,195,212,215,239,550,553,629,645,653,661,666,683,687,692,699,714,718,752,756,759,784,794,803,807,831,837,867,894,898,921,925,956,973,977,983,988,998,1053,1057,1063,1090,1097,1100,1115,1139,1142,1247,1251,1282,1295,1298,1301,1338],[19,20,8],"h1",{"id":8},[22,23,24,28,29,34,35,37,38,43,44,48],"p",{},[25,26,27],"code",{},"pnpm create vite"," 实际执行的是 npm 包 ",[30,31,32],"strong",{},[25,33,8],{},"（与 ",[25,36,12],{}," 本体不同）。工程化背景见 ",[39,40,42],"a",{"href":41},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fbasics","工程化概览","、",[39,45,47],{"href":46},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fworkflow","工作原理","。",[22,50,51,52,54],{},"下文从包管理器如何拉起脚手架，到 ",[25,53,8],{}," 内部流程做串联说明。",[56,57,58],"blockquote",{},[22,59,60,61,69,70,72],{},"下文逻辑以 Vite 仓库中 ",[39,62,66],{"href":63,"rel":64},"https:\u002F\u002Fgithub.com\u002Fvitejs\u002Fvite\u002Ftree\u002Fmain\u002Fpackages\u002Fcreate-vite",[65],"nofollow",[25,67,68],{},"packages\u002Fcreate-vite"," 为准；具体实现会随版本迭代，以你本地安装的 ",[25,71,8],{}," 源码为准。",[74,75,77],"h2",{"id":76},"先分清两个概念vite-与-create-vite","先分清两个概念：Vite 与 create-vite",[79,80,81,95],"ul",{},[82,83,84,87,88,90,91,94],"li",{},[30,85,86],{},"Vite","：构建工具与开发服务器（",[25,89,12],{}," 命令、",[25,92,93],{},"vite.config"," 等），负责开发与打包。",[82,96,97,99,100,103,104,107],{},[30,98,8],{},"：",[30,101,102],{},"独立 npm 包","，只做「把模板目录拷到目标文件夹、改 ",[25,105,106],{},"package.json","、可选装依赖并启动 dev」等脚手架工作。",[22,109,110,111,113,114,119,120,122],{},"因此 ",[25,112,27],{}," 实际执行的是 ",[30,115,116,118],{},[25,117,8],{}," 这个包的入口","，而不是直接调用 ",[25,121,12],{}," 本体。",[74,124,126,128],{"id":125},"pnpm-create-vite-是如何找到-create-vite-的",[25,127,27],{}," 是如何找到 create-vite 的？",[22,130,131,132,135,136,141],{},"各包管理器都约定：",[25,133,134],{},"create \u003Cname>"," 会解析并执行名为 ",[30,137,138],{},[25,139,140],{},"create-\u003Cname>"," 的包。",[143,144,145,158],"table",{},[146,147,148],"thead",{},[149,150,151,155],"tr",{},[152,153,154],"th",{},"你输入的命令",[152,156,157],{},"实际拉起的包（概念上）",[159,160,161,172,184],"tbody",{},[149,162,163,168],{},[164,165,166],"td",{},[25,167,27],{},[164,169,170],{},[25,171,8],{},[149,173,174,179],{},[164,175,176],{},[25,177,178],{},"npm create vite@latest",[164,180,181,183],{},[25,182,8],{},"（可指定版本）",[149,185,186,191],{},[164,187,188],{},[25,189,190],{},"yarn create vite",[164,192,193],{},[25,194,8],{},[22,196,197,200,201,203,204,207,208,211],{},[25,198,199],{},"pnpm"," 会下载（或复用缓存）",[25,202,8],{}," 到临时环境并执行其 ",[25,205,206],{},"bin","，无需全局安装。这与「先 ",[25,209,210],{},"npm i -g create-vite"," 再执行」效果类似，但更干净。",[74,213,214],{"id":214},"源码入口与参数解析",[22,216,217,219,220,227,228,231,232,235,236,48],{},[25,218,8],{}," 入口里用 ",[39,221,224],{"href":222,"rel":223},"https:\u002F\u002Fgithub.com\u002Flukeed\u002Fmri",[65],[25,225,226],{},"mri"," 解析 ",[25,229,230],{},"process.argv","（从第三个参数起，即用户传入部分），并配置了",[30,233,234],{},"布尔选项","与",[30,237,238],{},"短参数别名",[240,241,246],"pre",{"className":242,"code":243,"language":244,"meta":245,"style":245},"language-ts shiki shiki-themes material-theme-lighter github-light github-dark","\u002F\u002F 与仓库中一致的思路：pnpm create vite -t vue-ts\nimport mri from \"mri\";\n\nconst argv = mri\u003C{\n    template?: string;\n    help?: boolean;\n    overwrite?: boolean;\n    immediate?: boolean;\n    interactive?: boolean;\n}>(process.argv.slice(2), {\n    boolean: [\"help\", \"overwrite\", \"immediate\", \"interactive\"],\n    alias: { h: \"help\", t: \"template\", i: \"immediate\" },\n    string: [\"template\"],\n});\n","ts","",[25,247,248,257,285,292,314,330,343,355,367,379,415,468,520,540],{"__ignoreMap":245},[249,250,253],"span",{"class":251,"line":252},"line",1,[249,254,256],{"class":255},"sutJx","\u002F\u002F 与仓库中一致的思路：pnpm create vite -t vue-ts\n",[249,258,260,264,268,271,275,278,281],{"class":251,"line":259},2,[249,261,263],{"class":262},"sVHd0","import",[249,265,267],{"class":266},"su5hD"," mri ",[249,269,270],{"class":262},"from",[249,272,274],{"class":273},"sjJ54"," \"",[249,276,226],{"class":277},"s_sjI",[249,279,280],{"class":273},"\"",[249,282,284],{"class":283},"sP7_E",";\n",[249,286,288],{"class":251,"line":287},3,[249,289,291],{"emptyLinePlaceholder":290},true,"\n",[249,293,295,299,303,307,311],{"class":251,"line":294},4,[249,296,298],{"class":297},"sbsja","const",[249,300,302],{"class":301},"s_hVV"," argv",[249,304,306],{"class":305},"smGrS"," =",[249,308,310],{"class":309},"sGLFI"," mri",[249,312,313],{"class":283},"\u003C{\n",[249,315,317,321,324,328],{"class":251,"line":316},5,[249,318,320],{"class":319},"sucvu","    template",[249,322,323],{"class":305},"?:",[249,325,327],{"class":326},"sZMiF"," string",[249,329,284],{"class":283},[249,331,333,336,338,341],{"class":251,"line":332},6,[249,334,335],{"class":319},"    help",[249,337,323],{"class":305},[249,339,340],{"class":326}," boolean",[249,342,284],{"class":283},[249,344,346,349,351,353],{"class":251,"line":345},7,[249,347,348],{"class":319},"    overwrite",[249,350,323],{"class":305},[249,352,340],{"class":326},[249,354,284],{"class":283},[249,356,358,361,363,365],{"class":251,"line":357},8,[249,359,360],{"class":319},"    immediate",[249,362,323],{"class":305},[249,364,340],{"class":326},[249,366,284],{"class":283},[249,368,370,373,375,377],{"class":251,"line":369},9,[249,371,372],{"class":319},"    interactive",[249,374,323],{"class":305},[249,376,340],{"class":326},[249,378,284],{"class":283},[249,380,382,385,388,391,394,396,399,402,406,409,412],{"class":251,"line":381},10,[249,383,384],{"class":283},"}>",[249,386,387],{"class":266},"(process",[249,389,390],{"class":283},".",[249,392,393],{"class":266},"argv",[249,395,390],{"class":283},[249,397,398],{"class":309},"slice",[249,400,401],{"class":266},"(",[249,403,405],{"class":404},"srdBf","2",[249,407,408],{"class":266},")",[249,410,411],{"class":283},",",[249,413,414],{"class":283}," {\n",[249,416,418,422,425,428,430,433,435,437,439,442,444,446,448,451,453,455,457,460,462,465],{"class":251,"line":417},11,[249,419,421],{"class":420},"skxfh","    boolean",[249,423,424],{"class":283},":",[249,426,427],{"class":266}," [",[249,429,280],{"class":273},[249,431,432],{"class":277},"help",[249,434,280],{"class":273},[249,436,411],{"class":283},[249,438,274],{"class":273},[249,440,441],{"class":277},"overwrite",[249,443,280],{"class":273},[249,445,411],{"class":283},[249,447,274],{"class":273},[249,449,450],{"class":277},"immediate",[249,452,280],{"class":273},[249,454,411],{"class":283},[249,456,274],{"class":273},[249,458,459],{"class":277},"interactive",[249,461,280],{"class":273},[249,463,464],{"class":266},"]",[249,466,467],{"class":283},",\n",[249,469,471,474,476,479,482,484,486,488,490,492,495,497,499,502,504,506,509,511,513,515,517],{"class":251,"line":470},12,[249,472,473],{"class":420},"    alias",[249,475,424],{"class":283},[249,477,478],{"class":283}," {",[249,480,481],{"class":420}," h",[249,483,424],{"class":283},[249,485,274],{"class":273},[249,487,432],{"class":277},[249,489,280],{"class":273},[249,491,411],{"class":283},[249,493,494],{"class":420}," t",[249,496,424],{"class":283},[249,498,274],{"class":273},[249,500,501],{"class":277},"template",[249,503,280],{"class":273},[249,505,411],{"class":283},[249,507,508],{"class":420}," i",[249,510,424],{"class":283},[249,512,274],{"class":273},[249,514,450],{"class":277},[249,516,280],{"class":273},[249,518,519],{"class":283}," },\n",[249,521,523,526,528,530,532,534,536,538],{"class":251,"line":522},13,[249,524,525],{"class":420},"    string",[249,527,424],{"class":283},[249,529,427],{"class":266},[249,531,280],{"class":273},[249,533,501],{"class":277},[249,535,280],{"class":273},[249,537,464],{"class":266},[249,539,467],{"class":283},[249,541,543,546,548],{"class":251,"line":542},14,[249,544,545],{"class":283},"}",[249,547,408],{"class":266},[249,549,284],{"class":283},[22,551,552],{},"要点：",[79,554,555,578,589,604,612],{},[82,556,557,566,567,43,570,573,574,577],{},[30,558,559,562,563],{},[25,560,561],{},"-t"," \u002F ",[25,564,565],{},"--template","：指定模板 id，例如 ",[25,568,569],{},"vue-ts",[25,571,572],{},"react","；合法值来自内置列表（见下文 ",[25,575,576],{},"TEMPLATES","）。",[82,579,580,588],{},[30,581,582,562,585],{},[25,583,584],{},"-h",[25,586,587],{},"--help","：打印帮助后退出。",[82,590,591,599,600,603],{},[30,592,593,562,596],{},[25,594,595],{},"-i",[25,597,598],{},"--immediate","：创建完成后",[30,601,602],{},"直接安装依赖并启动 dev","（与交互里「是否现在安装」对应）。",[82,605,606,611],{},[30,607,608],{},[25,609,610],{},"--overwrite","：目标目录非空时，等价于选择「清空后继续」。",[82,613,614,622,623,628],{},[30,615,616,562,619],{},[25,617,618],{},"--interactive",[25,620,621],{},"--no-interactive","：强制进入或退出交互；未指定时，一般用 ",[30,624,625],{},[25,626,627],{},"process.stdin.isTTY"," 判断是否 TTY 交互环境。",[56,630,631],{},[22,632,633,634,642,643,48],{},"注意：短参数 ",[30,635,636,639,640],{},[25,637,638],{},"i"," 对应的是 ",[25,641,450],{},"（立即安装并启动），不是 ",[25,644,459],{},[74,646,648,649,652],{"id":647},"核心流程init-在做什么","核心流程：",[25,650,651],{},"init()"," 在做什么？",[22,654,655,657,658,660],{},[25,656,8],{}," 的主体是异步函数 ",[25,659,651],{},"，可概括为下面几步（与源码顺序一致，略有合并说明）。",[662,663,665],"h3",{"id":664},"_1-帮助信息","1. 帮助信息",[22,667,668,669,671,672,675,676,679,680,48],{},"若传入 ",[25,670,432],{},"，打印 ",[25,673,674],{},"helpMessage","（含用法、选项与",[30,677,678],{},"当前版本可用模板列表","）后 ",[25,681,682],{},"return",[662,684,686],{"id":685},"_2-是否交互","2. 是否交互",[22,688,689],{},[25,690,691],{},"const interactive = argInteractive ?? process.stdin.isTTY",[22,693,694,695,698],{},"非 TTY（如 CI、部分脚本环境）下往往走",[30,696,697],{},"非交互分支","：缺少信息时用默认值（例如默认目录名、默认模板等），具体以源码为准。",[22,700,701,702,705,706,709,710,713],{},"另外，源码里会通过 ",[25,703,704],{},"@vercel\u002Fdetect-agent"," 的 ",[25,707,708],{},"determineAgent()"," 判断是否在「AI Agent」环境，并在交互模式下提示可用",[30,711,712],{},"一条命令非交互创建","的方式，便于自动化。",[662,715,717],{"id":716},"_3-解析项目目录","3. 解析项目目录",[79,719,720,731,745],{},[82,721,722,723,726,727,730],{},"位置参数 ",[25,724,725],{},"argv._[0]"," 可作为目标目录（会经 ",[25,728,729],{},"formatTargetDir"," 清洗非法字符等）。",[82,732,733,734,737,738,741,742,48],{},"未传且为交互模式时，用 ",[25,735,736],{},"@clack\u002Fprompts"," 询问 ",[30,739,740],{},"Project name","，再得到 ",[25,743,744],{},"targetDir",[82,746,747,748,751],{},"默认目录名在源码里为 ",[25,749,750],{},"vite-project","（非交互且未指定时可能使用该默认）。",[662,753,755],{"id":754},"_4-目标目录已存在且非空","4. 目标目录已存在且非空",[22,757,758],{},"若目录存在且非空：",[79,760,761,774],{},[82,762,763,764,766,767,770,771,577],{},"传了 ",[25,765,610],{}," 则直接清空（保留 ",[25,768,769],{},".git"," 的策略见源码 ",[25,772,773],{},"emptyDir",[82,775,776,777,780,781,783],{},"否则在交互模式下让用户选：",[30,778,779],{},"取消 \u002F 清空继续 \u002F 忽略继续","；非交互且未 ",[25,782,441],{}," 则可能直接取消。",[662,785,787,788,705,790,793],{"id":786},"_5-packagejson-的-name-字段","5. ",[25,789,106],{},[25,791,792],{},"name"," 字段",[22,795,796,799,800,48],{},[25,797,798],{},"packageName"," 通常取目标文件夹 basename；若不符合 npm 包名规则，会提示修正或自动 ",[25,801,802],{},"toValidPackageName",[662,804,806],{"id":805},"_6-选择模板框架-变体","6. 选择模板（框架 + 变体）",[79,808,809,820],{},[82,810,811,812,814,815,819],{},"若已通过 ",[25,813,561],{}," 传入模板，且该字符串在 ",[30,816,817],{},[25,818,576],{}," 列表中，则直接使用。",[82,821,822,823,826,827,830],{},"若传入的模板名",[30,824,825],{},"不合法","，交互模式下会提示重新选择；非交互则可能回退到默认模板（如 ",[25,828,829],{},"vanilla-ts","，以源码为准）。",[22,832,833,834,99],{},"交互模式下通常是",[30,835,836],{},"两步选择",[838,839,840,850],"ol",{},[82,841,842,845,846,849],{},[30,843,844],{},"Select a framework","：Vue、React、Vanilla 等（",[25,847,848],{},"FRAMEWORKS"," 配置驱动）。",[82,851,852,855,856,562,858,43,861,562,864,866],{},[30,853,854],{},"Select a variant","：如 ",[25,857,569],{},[25,859,860],{},"vue",[25,862,863],{},"react-ts",[25,865,572],{}," 等。",[22,868,869,870,875,876,879,880,883,884,887,888,893],{},"部分选项不是内置模板目录，而是 ",[30,871,872],{},[25,873,874],{},"customCommand","：选中后会拼好命令（把 ",[25,877,878],{},"TARGET_DIR"," 换成你的目录），",[25,881,882],{},"spawn"," 执行另一条脚手架（例如 ",[25,885,886],{},"npm create vue@latest","），然后 ",[30,889,890],{},[25,891,892],{},"process.exit","，不再走后面的「拷贝 template-*」逻辑。",[662,895,897],{"id":896},"_7-react-compiler-变体","7. React Compiler 变体",[22,899,900,901,904,905,908,909,912,913,916,917,920],{},"若模板名包含 ",[25,902,903],{},"react-compiler","，会先置 ",[25,906,907],{},"isReactCompiler","，并把模板名里的 ",[25,910,911],{},"-compiler"," 去掉以对应实际 ",[25,914,915],{},"template-*"," 目录；生成后再跑 ",[25,918,919],{},"setupReactCompiler"," 往项目里写入 Babel \u002F 插件等相关依赖与配置（版本号以源码为准）。",[662,922,924],{"id":923},"_8-是否立即安装并启动","8. 是否立即安装并启动",[22,926,927,929,930,562,932,934,935,938,939,944,945,948,949,948,952,955],{},[25,928,450],{}," 来自 ",[25,931,595],{},[25,933,598],{},"，或在交互里 confirm「Install with \u003CpkgManager> and start now?」。",[936,937],"br",{},"\n非交互且未指定时，一般为 ",[30,940,941],{},[25,942,943],{},"false","，只生成文件，最后打印 ",[25,946,947],{},"cd"," + ",[25,950,951],{},"install",[25,953,954],{},"dev"," 提示。",[22,957,958,961,962,965,966,969,970,972],{},[25,959,960],{},"pkgManager"," 常从 ",[25,963,964],{},"npm_config_user_agent"," 解析（例如你在用 ",[25,967,968],{},"pnpm create"," 时倾向于用 ",[25,971,199],{}," 安装）。",[662,974,976],{"id":975},"_9-脚手架落盘模板目录在哪","9. 脚手架落盘：模板目录在哪？",[22,978,979,980,982],{},"内置模板路径大致为（相对 ",[25,981,8],{}," 包内入口文件）：",[22,984,985],{},[25,986,987],{},"..\u002F..\u002Ftemplate-${template}",[22,989,990,991,993,994,997],{},"例如 ",[25,992,569],{}," → ",[25,995,996],{},"template-vue-ts"," 目录。随后：",[79,999,1000,1013,1026,1039],{},[82,1001,1002,1005,1006,1012],{},[25,1003,1004],{},"readdir"," 模板目录，",[30,1007,1008,1009,1011],{},"先拷贝除 ",[25,1010,106],{}," 以外的文件","；",[82,1014,1015,1016,1019,1020,1025],{},"对 ",[25,1017,1018],{},"index.html"," 会读模板内容并替换 ",[30,1021,1022],{},[25,1023,1024],{},"\u003Ctitle>...\u003C\u002Ftitle>"," 为项目展示名；",[82,1027,1028,1031,1032,1035,1036,1012],{},[25,1029,1030],{},"_gitignore"," 等特殊文件名会通过 ",[25,1033,1034],{},"renameFiles"," 映射为 ",[25,1037,1038],{},".gitignore",[82,1040,1041,1042,1044,1045,1052],{},"最后读模板内 ",[25,1043,106],{},"，把 ",[30,1046,1047,1049,1050],{},[25,1048,792],{}," 写成 ",[25,1051,798],{},"，再写入目标目录。",[662,1054,1056],{"id":1055},"_10-安装依赖与启动-dev","10. 安装依赖与启动 dev",[22,1058,1059,1060,1062],{},"若 ",[25,1061,450],{}," 为真：",[79,1064,1065,1081],{},[82,1066,1067,99,1069,1072,1073,1076,1077,1080],{},[25,1068,951],{},[25,1070,1071],{},"cross-spawn"," 同步执行当前包管理器的 install 命令，",[25,1074,1075],{},"cwd"," 为目标项目根目录；测试环境可通过 ",[25,1078,1079],{},"_VITE_TEST_CLI"," 跳过真实安装。",[82,1082,1083,1086,1087,1089],{},[25,1084,1085],{},"start","：同理执行 ",[25,1088,954],{}," 脚本。",[22,1091,1092,1093,1096],{},"否则用 ",[25,1094,1095],{},"prompts.outro"," 输出「接下来在项目里执行的三条命令」。",[74,1098,1099],{"id":1099},"与文中示例代码的对应关系",[22,1101,1102,1103,562,1106,562,1108,1110,1111,1114],{},"你在文章里贴的 ",[25,1104,1105],{},"write",[25,1107,951],{},[25,1109,1085],{}," 片段，正是上面",[30,1112,1113],{},"落盘 + 可选安装启动","部分的缩影。阅读源码时建议对照：",[79,1116,1117],{},[82,1118,1119,1126,1127,43,1130,43,1132,43,1135,43,1137,48],{},[39,1120,1123],{"href":1121,"rel":1122},"https:\u002F\u002Fgithub.com\u002Fvitejs\u002Fvite\u002Fblob\u002Fmain\u002Fpackages\u002Fcreate-vite\u002Fsrc\u002Findex.ts",[65],[25,1124,1125],{},"packages\u002Fcreate-vite\u002Fsrc\u002Findex.ts"," 中的 ",[25,1128,1129],{},"init",[25,1131,1105],{},[25,1133,1134],{},"copy",[25,1136,951],{},[25,1138,1085],{},[74,1140,1141],{"id":1141},"常用命令速查",[240,1143,1147],{"className":1144,"code":1145,"language":1146,"meta":245,"style":245},"language-bash shiki shiki-themes material-theme-lighter github-light github-dark","# 交互创建（推荐本地尝鲜）\npnpm create vite\n\n# 指定目录与模板，适合脚本 \u002F CI\npnpm create vite my-app --template vue-ts\n\n# 创建后立刻安装并启动\npnpm create vite my-app --template react-ts --immediate\n\n# 非交互（无 TTY 或显式关闭交互时使用）\npnpm create vite my-app --template vanilla-ts --no-interactive\n","bash",[25,1148,1149,1154,1165,1169,1174,1193,1197,1202,1220,1224,1229],{"__ignoreMap":245},[249,1150,1151],{"class":251,"line":252},[249,1152,1153],{"class":255},"# 交互创建（推荐本地尝鲜）\n",[249,1155,1156,1159,1162],{"class":251,"line":259},[249,1157,199],{"class":1158},"sbgvK",[249,1160,1161],{"class":277}," create",[249,1163,1164],{"class":277}," vite\n",[249,1166,1167],{"class":251,"line":287},[249,1168,291],{"emptyLinePlaceholder":290},[249,1170,1171],{"class":251,"line":294},[249,1172,1173],{"class":255},"# 指定目录与模板，适合脚本 \u002F CI\n",[249,1175,1176,1178,1180,1183,1186,1190],{"class":251,"line":316},[249,1177,199],{"class":1158},[249,1179,1161],{"class":277},[249,1181,1182],{"class":277}," vite",[249,1184,1185],{"class":277}," my-app",[249,1187,1189],{"class":1188},"stzsN"," --template",[249,1191,1192],{"class":277}," vue-ts\n",[249,1194,1195],{"class":251,"line":332},[249,1196,291],{"emptyLinePlaceholder":290},[249,1198,1199],{"class":251,"line":345},[249,1200,1201],{"class":255},"# 创建后立刻安装并启动\n",[249,1203,1204,1206,1208,1210,1212,1214,1217],{"class":251,"line":357},[249,1205,199],{"class":1158},[249,1207,1161],{"class":277},[249,1209,1182],{"class":277},[249,1211,1185],{"class":277},[249,1213,1189],{"class":1188},[249,1215,1216],{"class":277}," react-ts",[249,1218,1219],{"class":1188}," --immediate\n",[249,1221,1222],{"class":251,"line":369},[249,1223,291],{"emptyLinePlaceholder":290},[249,1225,1226],{"class":251,"line":381},[249,1227,1228],{"class":255},"# 非交互（无 TTY 或显式关闭交互时使用）\n",[249,1230,1231,1233,1235,1237,1239,1241,1244],{"class":251,"line":417},[249,1232,199],{"class":1158},[249,1234,1161],{"class":277},[249,1236,1182],{"class":277},[249,1238,1185],{"class":277},[249,1240,1189],{"class":1188},[249,1242,1243],{"class":277}," vanilla-ts",[249,1245,1246],{"class":1188}," --no-interactive\n",[74,1248,1250],{"id":1249},"总结一条线","总结（一条线）",[22,1252,1253],{},[30,1254,1255,1256,1259,1260,993,1262,1264,1265,1267,1268,1270,1271,1273,1274,1276,1277,948,1279,1281],{},"包管理器解析 ",[25,1257,1258],{},"create vite"," → 下载并执行 ",[25,1261,8],{},[25,1263,226],{}," 解析参数 →（TTY 则交互收集目录名、模板、是否立即安装）→ 校验模板 \u002F 或转交 ",[25,1266,874],{}," → 从 ",[25,1269,915],{}," 拷贝并改写 ",[25,1272,106],{}," 与 ",[25,1275,1018],{}," → 按需 ",[25,1278,951],{},[25,1280,954],{}," 或打印后续命令。",[22,1283,1284,1285,1294],{},"把这条链路记熟后，排查「为什么没进我想要的模板」「为什么 CI 里行为不一样」会直观很多：多半落在 ",[30,1286,1287,1288,1290,1291,1293],{},"TTY \u002F ",[25,1289,621],{},"、模板名是否合法、是否命中 ",[25,1292,874],{}," 提前退出"," 这几类问题上。",[74,1296,1297],{"id":1297},"参考文献",[22,1299,1300],{},"以下链接在编写时均可正常访问：",[143,1302,1303,1313],{},[146,1304,1305],{},[149,1306,1307,1310],{},[152,1308,1309],{},"资料",[152,1311,1312],{},"说明",[159,1314,1315,1326],{},[149,1316,1317,1323],{},[164,1318,1319],{},[39,1320,1322],{"href":63,"rel":1321},[65],"create-vite 源码",[164,1324,1325],{},"GitHub",[149,1327,1328,1335],{},[164,1329,1330],{},[39,1331,1334],{"href":1332,"rel":1333},"https:\u002F\u002Fcn.vite.dev\u002Fguide\u002F",[65],"Vite：创建项目",[164,1336,1337],{},"官方入门",[1339,1340,1341],"style",{},"html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sucvu, html code.shiki .sucvu{--shiki-light:#E53935;--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .stzsN, html code.shiki .stzsN{--shiki-light:#91B859;--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":245,"searchDepth":259,"depth":259,"links":1343},[1344,1345,1347,1348,1362,1363,1364,1365],{"id":76,"depth":259,"text":77},{"id":125,"depth":259,"text":1346},"pnpm create vite 是如何找到 create-vite 的？",{"id":214,"depth":259,"text":214},{"id":647,"depth":259,"text":1349,"children":1350},"核心流程：init() 在做什么？",[1351,1352,1353,1354,1355,1357,1358,1359,1360,1361],{"id":664,"depth":287,"text":665},{"id":685,"depth":287,"text":686},{"id":716,"depth":287,"text":717},{"id":754,"depth":287,"text":755},{"id":786,"depth":287,"text":1356},"5. package.json 的 name 字段",{"id":805,"depth":287,"text":806},{"id":896,"depth":287,"text":897},{"id":923,"depth":287,"text":924},{"id":975,"depth":287,"text":976},{"id":1055,"depth":287,"text":1056},{"id":1099,"depth":259,"text":1099},{"id":1141,"depth":259,"text":1141},{"id":1249,"depth":259,"text":1250},{"id":1297,"depth":259,"text":1297},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fproject\u002FVite\u002Fcreate-vite","knowledge\u002Fknowledge\u002Fbooklet\u002Fproject\u002FVite\u002Fcreate-vite.md","md",{"items":1371},[1372,1376,1380,1384,1388,1390],{"path":1373,"title":1374,"description":1375,"category":10,"score":332},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fdeploy","部署实践","Vite 项目的 CI\u002FCD、多环境、CDN、Legacy 与体积预算等工程化要点。环境变量见 env；构建见 生产构建。",{"path":1377,"title":1378,"description":1379,"category":10,"score":332},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fplugin","插件开发","Vite 插件兼容 Rollup 插件，并扩展 config、configureServer、transformIndexHtml 等钩子。原理见 工作原理。",{"path":1381,"title":1382,"description":1383,"category":10,"score":332},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fadvanced","进阶配置","Vite 进阶：server.proxy、resolve.alias、SSR、多页面、库模式、vite preview 等。环境变量见 env。",{"path":1385,"title":1386,"description":1387,"category":10,"score":332},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fbuild","生产构建","vite build 使用 Rollup 打包并应用内置优化。开发阶段原理见 工作原理。",{"path":46,"title":47,"description":1389,"category":10,"score":332},"Vite 是面向现代浏览器的前端构建工具：开发阶段利用原生 ES 模块与按需编译；生产构建由 Rollup 完成。对比见 Webpack 与 Vite、工程化概览。",{"path":1391,"title":1392,"description":1393,"category":10,"score":294},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fproject\u002Fother","其他配置","除 ESLint、Prettier 等规范文件外，仓库中常见的工具链与包管理配置如下。见 工程化概览。",{"series":1395,"title":12,"items":1396,"index":259,"prev":1408,"next":1409},"booklet\u002Fproject\u002Fvite",[1397,1399,1401,1402,1404,1406],{"path":1381,"title":1382,"date":1398,"pinned":14},"2022-05-08",{"path":1385,"title":1386,"date":1400,"pinned":14},"2021-07-24",{"path":7,"title":8,"date":13,"pinned":14},{"path":1373,"title":1374,"date":1403,"pinned":14},"2025-10-12",{"path":1377,"title":1378,"date":1405,"pinned":14},"2023-03-27",{"path":46,"title":47,"date":1407,"pinned":14},"2020-06-15",{"path":1385,"title":1386,"date":1400,"pinned":14},{"path":1373,"title":1374,"date":1403,"pinned":14}]