前端脚手架初始化一个项目的目录结构和里面的代码，是如何实现的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 888 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近在开发一个前端 CLI 工具，请问一下类似 create-react-app 、vite 这些脚手架工具，在初始化一个项目时，生成的初始目录结构，以及这些文件内的代码，是如何更方便的实现的？

初始

脚手架

代码

11 条回复 • 2022-07-14 09:22:53 +08:00

ifdef

2022-07-13 16:53:08 +08:00

可以看源码

https://github.com/facebook/create-react-app

yhxx

2022-07-13 17:01:39 +08:00

create-react-app 是从指定的模板直接复制过来的

laolaowang

2022-07-13 17:14:06 +08:00

见过的大部分项目貌似是固定的模板

dudubaba

2022-07-13 17:21:42 +08:00

就是个下载的过程：模板放在 git 仓库里，当使用 inquirer 这种交互选择模板后，从 git 仓库中 download 模板到本地

draco95

2022-07-13 17:27:31 +08:00

这边建议直接用 @angular-devkit/schematics

caisanli

2022-07-13 18:08:27 +08:00 via iPhone

创建一个模版仓库初始化项目的时候用 git-clone 拉取这个模版仓库的代码

connection

2022-07-13 19:47:36 +08:00

一般是模版 + 变量 => 生成项目

zhuweiyou

2022-07-13 19:50:36 +08:00

专门搞个仓库放模版,里面用模版语法, 然后加上你 cli 选的变量, 生成出来文件就行了.

humbass

2022-07-13 20:54:07 +08:00

最简单：事先放几个自己定义的模板类型，根据交互选择，后台 git 回来 copy 到指定位置不就行了
复杂点：copy 完毕后，用 fs 来修改

高兴的话，还可以调用 process_child 帮用户把 npm install 都执行了。

Al0rid4l

2022-07-13 22:03:13 +08:00

复制文件, 模板引擎填充变量...

296727

2022-07-14 09:22:53 +08:00

就是 cv