「Create-?」每个前端开发者都可以拥有属于自己的命令行脚手架

也想出现在这里？点击联系我~

前言

为什么要写这篇文章呢?是因为最近一直在搞Strve.js生态，在自己捣鼓框架的同时也学到了很多东西。所以就本篇文章给大家介绍一种更加方便灵活的命令行脚手架工具，以及如何发布到NPM上。

之前，我也写过类似的开发命令行工具的文章，但是核心思想都是通过代码远程拉取Git仓库中的项目模板代码。有时候会因为网速的原因导致拉取失败，进而会初始化项目失败。

那么，有没有比这个更好的方案呢?那么本篇就来了。

最近，使用Vite工具开发了很多项目。不得不佩服尤老师惊人的代码能力，创建了这么好的开发工具，开发体验非常丝滑。尤其是你刚初始化项目时，只需要执行一行命令，也不用全局安装什么工具。然后，自定义选择需要的模板进行初始化项目，就大功告成了!这种操作着实把我惊到了!我在想，如果我把create-vite的这种思路应用到我自己的脚手架工具中是不是很Nice!

实战

所以，二话不说，就抓紧打开ViteGitHub地址。

https://github.com/vitejs

找了大半天，终于找到了命令行工具核心代码。

https://github.com/vitejs/vite/tree/main/packages/create-vite

映入眼帘的是很多以template-开头的文件夹，打开几个都看了一下，都是框架项目模板。那么，可以先放在一边。

下一步，我们就打开index.js文件看下什么内容。我列下代码，大家可以简单看一下，不用深究。

1. #!/usr/bin/env node
3. // @ts-check
4. const fs = require(\’fs\’)
5. const path = require(\’path\’)
6. // Avoids autoconversion to number of the project name by defining that the args
7. // non associated with an option ( _ ) needs to be parsed as a string. See #4606
8. const argv = require(\’minimist\’)(process.argv.slice(2), { string: [\’_\’] })
9. // eslint-disable-next-line node/no-restricted-require
10. const prompts = require(\’prompts\’)
11. const {
12. yellow,
13. green,
14. cyan,
15. blue,
16. magenta,
17. lightRed,
18. red
19. } = require(\’kolorist\’)
21. const cwd = process.cwd()
23. const FRAMEWORKS = [
24. {
25. name: \’vanilla\’,
26. color: yellow,
27. variants: [
28. {
29. name: \’vanilla\’,
30. display: \’JavaScript\’,
31. color: yellow
32. },
33. {
34. name: \’vanilla-ts\’,
35. display: \’TypeScript\’,
36. color: blue
37. }
38. ]
39. },
40. {
41. name: \’vue\’,
42. color: green,
43. variants: [
44. {
45. name: \’vue\’,
46. display: \’JavaScript\’,
47. color: yellow
48. },
49. {
50. name: \’vue-ts\’,
51. display: \’TypeScript\’,
52. color: blue
53. }
54. ]
55. },
56. {
57. name: \’react\’,
58. color: cyan,
59. variants: [
60. {
61. name: \’react\’,
62. display: \’JavaScript\’,
63. color: yellow
64. },
65. {
66. name: \’react-ts\’,
67. display: \’TypeScript\’,
68. color: blue
69. }
70. ]
71. },
72. {
73. name: \’preact\’,
74. color: magenta,
75. variants: [
76. {
77. name: \’preact\’,
78. display: \’JavaScript\’,
79. color: yellow
80. },
81. {
82. name: \’preact-ts\’,
83. display: \’TypeScript\’,
84. color: blue
85. }
86. ]
87. },
88. {
89. name: \’lit\’,
90. color: lightRed,
91. variants: [
92. {
93. name: \’lit\’,
94. display: \’JavaScript\’,
95. color: yellow
96. },
97. {
98. name: \’lit-ts\’,
99. display: \’TypeScript\’,
100. color: blue
101. }
102. ]
103. },
104. {
105. name: \’svelte\’,
106. color: red,
107. variants: [
108. {
109. name: \’svelte\’,
110. display: \’JavaScript\’,
111. color: yellow
112. },
113. {
114. name: \’svelte-ts\’,
115. display: \’TypeScript\’,
116. color: blue
117. }
118. ]
119. }
120. ]
122. const TEMPLATES = FRAMEWORKS.map(
123. (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name]
124. ).reduce((a, b) => a.concat(b), [])
126. const renameFiles = {
127. _gitignore: \’.gitignore\’
128. }
130. async function init() {
131. let targetDir = argv._[0]
132. let template = argv.template || argv.t
134. const defaultProjectName = !targetDir ? \’vite-project\’ : targetDir
136. let result = {}
138. try {
139. result = await prompts(
140. [
141. {
142. type: targetDir ? null : \’text\’,
143. name: \’projectName\’,
144. message: \’Project name:\’,
145. initial: defaultProjectName,
146. onState: (state) =>
147. (targetDir = state.value.trim() || defaultProjectName)
148. },
149. {
150. type: () =>
151. !fs.existsSync(targetDir) || isEmpty(targetDir) ? null : \’confirm\’,
152. name: \’overwrite\’,
153. message: () =>
154. (targetDir === \’.\’
155. ? \’Current directory\’
156. : `Target directory \”${targetDir}\”`) +
157. ` is not empty. Remove existing files and continue?`
158. },
159. {
160. type: (_, { overwrite } = {}) => {
161. if (overwrite === false) {
162. throw new Error(red(\’✖\’) + \’ Operation cancelled\’)
163. }
164. return null
165. },
166. name: \’overwriteChecker\’
167. },
168. {
169. type: () => (isValidPackageName(targetDir) ? null : \’text\’),
170. name: \’packageName\’,
171. message: \’Package name:\’,
172. initial: () => toValidPackageName(targetDir),
173. validate: (dir) =>
174. isValidPackageName(dir) || \’Invalid package.json name\’
175. },
176. {
177. type: template && TEMPLATES.includes(template) ? null : \’select\’,
178. name: \’framework\’,
179. message:
180. typeof template === \’string\’ && !TEMPLATES.includes(template)
181. ? `\”${template}\” isn\’t a valid template. Please choose from below: `
182. : \’Select a framework:\’,
183. initial: 0,
184. choices: FRAMEWORKS.map((framework) => {
185. const frameworkColor = framework.color
186. return {
187. title: frameworkColor(framework.name),
188. value: framework
189. }
190. })
191. },
192. {
193. type: (framework) =>
194. framework && framework.variants ? \’select\’ : null,
195. name: \’variant\’,
196. message: \’Select a variant:\’,
197. // @ts-ignore
198. choices: (framework) =>
199. framework.variants.map((variant) => {
200. const variantColor = variant.color
201. return {
202. title: variantColor(variant.name),
203. value: variant.name
204. }
205. })
206. }
207. ],
208. {
209. onCancel: () => {
210. throw new Error(red(\’✖\’) + \’ Operation cancelled\’)
211. }
212. }
213. )
214. } catch (cancelled) {
215. console.log(cancelled.message)
216. return
217. }
219. // user choice associated with prompts
220. const { framework, overwrite, packageName, variant } = result
222. const root = path.join(cwd, targetDir)
224. if (overwrite) {
225. emptyDir(root)
226. } else if (!fs.existsSync(root)) {
227. fs.mkdirSync(root)
228. }
230. // determine template
231. template = variant || framework || template
233. console.log(`\\nScaffolding project in ${root}…`)
235. const templateDir = path.join(__dirname, `template-${template}`)
237. const write = (file, content) => {
238. const targetPath = renameFiles[file]
239. ? path.join(root, renameFiles[file])
240. : path.join(root, file)
241. if (content) {
242. fs.writeFileSync(targetPath, content)
243. } else {
244. copy(path.join(templateDir, file), targetPath)
245. }
246. }
248. const files = fs.readdirSync(templateDir)
249. for (const file of files.filter((f) => f !== \’package.json\’)) {
250. write(file)
251. }
253. const pkg = require(path.join(templateDir, `package.json`))
255. pkg.name = packageName || targetDir
257. write(\’package.json\’, JSON.stringify(pkg, null, 2))
259. const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent)
260. const pkgManager = pkgInfo ? pkgInfo.name : \’npm\’
262. console.log(`\\nDone. Now run:\\n`)
263. if (root !== cwd) {
264. console.log(` cd ${path.relative(cwd, root)}`)
265. }
266. switch (pkgManager) {
267. case \’yarn\’:
268. console.log(\’ yarn\’)
269. console.log(\’ yarn dev\’)
270. break
271. default:
272. console.log(` ${pkgManager} install`)
273. console.log(` ${pkgManager} run dev`)
274. break
275. }
276. console.log()
277. }
279. function copy(src, dest) {
280. const stat = fs.statSync(src)
281. if (stat.isDirectory()) {
282. copyDir(src, dest)
283. } else {
284. fs.copyFileSync(src, dest)
285. }
286. }
288. function isValidPackageName(projectName) {
289. return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
290. projectName
291. )
292. }
294. function toValidPackageName(projectName) {
295. return projectName
296. .trim()
297. .toLowerCase()
298. .replace(/\\s+/g, \’-\’)
299. .replace(/^[._]/, \’\’)
300. .replace(/[^a-z0-9-~]+/g, \’-\’)
301. }
303. function copyDir(srcDir, destDir) {
304. fs.mkdirSync(destDir, { recursive: true })
305. for (const file of fs.readdirSync(srcDir)) {
306. const srcFile = path.resolve(srcDir, file)
307. const destFile = path.resolve(destDir, file)
308. copy(srcFile, destFile)
309. }
310. }
312. function isEmpty(path) {
313. return fs.readdirSync(path).length === 0
314. }
316. function emptyDir(dir) {
317. if (!fs.existsSync(dir)) {
318. return
319. }
320. for (const file of fs.readdirSync(dir)) {
321. const abs = path.resolve(dir, file)
322. // baseline is Node 12 so can\’t use rmSync 🙁
323. if (fs.lstatSync(abs).isDirectory()) {
324. emptyDir(abs)
325. fs.rmdirSync(abs)
326. } else {
327. fs.unlinkSync(abs)
328. }
329. }
330. }
332. /**
333. * @param {string | undefined} userAgent process.env.npm_config_user_agent
334. * @returns object | undefined
335. */
336. function pkgFromUserAgent(userAgent) {
337. if (!userAgent) return undefined
338. const pkgSpec = userAgent.split(\’ \’)[0]
339. const pkgSpecArr = pkgSpec.split(\’/\’)
340. return {
341. name: pkgSpecArr[0],
342. version: pkgSpecArr[1]
343. }
344. }
346. init().catch((e) => {
347. console.error(e)
348. })

看到上面这么多代码是不是不想继续阅读下去了?不要慌!我们其实就用到里面几个地方，可以放心的继续阅读下去。

这些代码算是Create Vite核心代码了，我们会看到常量FRAMEWORKS定义了一个数组对象，另外数组对象中都是一些我们初始化项目时需要选择安装的框架。所以，我们可以先ViteGithub项目Clone下来，试试效果。

然后，将项目Clone下来之后，我们找到/packages/create-vite这个文件夹，我们现在就只关注这个文件夹。

我用的Yarn依赖管理工具，所以我首先使用命令初始化依赖。

1. yarn

然后，我们可以先打开根目录下的package.json文件，会发现有如下命令。

1. {
2. \”bin\”: {
3. \”create-vite\”: \”index.js\”,
4. \”cva\”: \”index.js\”
5. }
6. }

我们可以在这里起一个自己模板的名字，比如我们就叫demo，

1. {
2. \”bin\”: {
3. \”create-demo\”: \”index.js\”,
4. \”cvd\”: \”index.js\”
5. }
6. }

然后，我们先在这里使用yarn link命令来将此命令在本地可以运行。

然后再运行create-demo命令·。

会显示一些交互文本，会发现非常熟悉，这正是我们创建Vite项目时所看到的。我们在前面说到我们想实现一个属于自己的项目模板，现在我们也找到了核心。所以就开始干起来吧!

我们会看到在根目录下有很多template-开头的文件夹，我们打开一个看一下。比如template-vue。

原来模板都在这!但是这些模板文件都是以template-开头，是不是有什么约定?所以，我们打算回头再去看下index.js文件。

1. // determine template
2. template = variant || framework || template
4. console.log(`\\nScaffolding project in ${root}…`)
6. const templateDir = path.join(__dirname, `template-${template}`)

果真，所以模板都必须以template-开头。

那么，我们就在根目录下面建一个template-demo文件夹，里面再放一个index.js文件，作为示例模板。

我们在执行初始化项目时发现，需要选择对应的模板，那么这些选项是从哪里来的呢?我们决定再回去看下根目录下的index.js文件。

会发现有这么一个数组，里面正是我们要选择的框架模板。

1. const FRAMEWORKS = [
2. {
3. name: \’vanilla\’,
4. color: yellow,
5. variants: [
6. {
7. name: \’vanilla\’,
8. display: \’JavaScript\’,
9. color: yellow
10. },
11. {
12. name: \’vanilla-ts\’,
13. display: \’TypeScript\’,
14. color: blue
15. }
16. ]
17. },
18. {
19. name: \’vue\’,
20. color: green,
21. variants: [
22. {
23. name: \’vue\’,
24. display: \’JavaScript\’,
25. color: yellow
26. },
27. {
28. name: \’vue-ts\’,
29. display: \’TypeScript\’,
30. color: blue
31. }
32. ]
33. },
34. {
35. name: \’react\’,
36. color: cyan,
37. variants: [
38. {
39. name: \’react\’,
40. display: \’JavaScript\’,
41. color: yellow
42. },
43. {
44. name: \’react-ts\’,
45. display: \’TypeScript\’,
46. color: blue
47. }
48. ]
49. },
50. {
51. name: \’preact\’,
52. color: magenta,
53. variants: [
54. {
55. name: \’preact\’,
56. display: \’JavaScript\’,
57. color: yellow
58. },
59. {
60. name: \’preact-ts\’,
61. display: \’TypeScript\’,
62. color: blue
63. }
64. ]
65. },
66. {
67. name: \’lit\’,
68. color: lightRed,
69. variants: [
70. {
71. name: \’lit\’,
72. display: \’JavaScript\’,
73. color: yellow
74. },
75. {
76. name: \’lit-ts\’,
77. display: \’TypeScript\’,
78. color: blue
79. }
80. ]
81. },
82. {
83. name: \’svelte\’,
84. color: red,
85. variants: [
86. {
87. name: \’svelte\’,
88. display: \’JavaScript\’,
89. color: yellow
90. },
91. {
92. name: \’svelte-ts\’,
93. display: \’TypeScript\’,
94. color: blue
95. }
96. ]
97. }
98. ]

所以，可以在后面数组后面再添加一个对象。

1. {
2. name: \’demo\’,
3. color: red,
4. variants: [
5. {
6. name: \’demo\’,
7. display: \’JavaScript\’,
8. color: yellow
9. }
10. ]
11. }

好，你会发现我这里会有个color属性，并且有类似颜色值的属性值，这是依赖kolorist导出的常量。kolorist是一个将颜色放入标准输入/标准输出的小库。我们在之前那些模板交互文本会看到它们显示不同颜色，这正是它的功劳。

1. const {
2. yellow,
3. green,
4. cyan,
5. blue,
6. magenta,
7. lightRed,
8. red
9. } = require(\’kolorist\’)

我们，也将模板对象添加到数组里了，那么下一步我们执行命令看下效果。

会发现多了一个demo模板，这正是我们想要的。

我们继续执行下去。

我们会看到根目录下已经成功创建了demo1文件夹，并且里面正是我们想要的demo模板。

上图显示的Error，是因为我没有在demo模板上创建package.json文件，所以这里可以忽略。你可以在自己的模板里创建一个package.json文件。

虽然，我们成功在本地创建了自己的一个模板，但是，我们只能本地创建。也就是说你换台电脑，就没有办法执行这个创建模板的命令。

所以，我们要想办法去发布到云端，这里我们发布到NPM上。

首先，我们重新新建一个项目目录，将其他模板删除，只保留我们自己的模板。另外，将数组中的其他模板对象删除，保留一个自己的模板。

我以自己的模板create-strve-app为例。

然后，我们打开package.json文件，需要修改一些信息。

以create-strve-app为例：

1. {
2. \”name\”: \”create-strve-app\”,
3. \”version\”: \”1.3.3\”,
4. \”license\”: \”MIT\”,
5. \”author\”: \”maomincoding\”,
6. \”bin\”: {
7. \”create-strve-app\”: \”index.js\”,
8. \”cs-app\”: \”index.js\”
9. },
10. \”files\”: [
11. \”index.js\”,
12. \”template-*\”
13. ],
14. \”main\”: \”index.js\”,
15. \”private\”: false,
16. \”keywords\”: [\”strve\”,\”strvejs\”,\”dom\”,\”mvvm\”,\”virtual dom\”,\”html\”,\”template\”,\”string\”,\”create-strve\”,\”create-strve-app\”],
17. \”engines\”: {
18. \”node\”: \”>=12.0.0\”
19. },
20. \”repository\”: {
21. \”type\”: \”git\”,
22. \”url\”: \”git+https://github.com/maomincoding/create-strve-app.git\”
23. },
24. \”bugs\”: {
25. \”url\”: \”https://github.com/maomincoding/create-strve-app/issues\”
26. },
27. \”homepage\”: \”https://github.com/maomincoding/create-strve-app#readme\”,
28. \”dependencies\”: {
29. \”kolorist\”: \”^1.5.0\”,
30. \”minimist\”: \”^1.2.5\”,
31. \”prompts\”: \”^2.4.2\”
32. }
33. }

注意，每次发布前，version字段必须与之前不同，否则发布失败。

最后，我们依次运行如下命令。

切换到npm源

1. npm config set registry=https://registry.npmjs.org

登录NPM(如果已登录，可忽略此步)

1. npm login

发布NPM

1. npm publish

我们可以登录到NPM(https://www.npmjs.com/)

查看已经发布成功!

以后，我们就可以直接运行命令下载自定义模板。这在我们重复使用模板时非常有用，不仅可以提升效率，而且还可以避免犯很多不必要的错误。

结语

另外，此篇举例的 Create Strve App 是一套快速搭建Strve.js项目的命令行工具。如果你对此感兴趣，可以访问以下地址查看源码：

https://github.com/maomincoding/create-strve-app

熬夜奋战二个多月，Strve.js生态初步已经建成，以下是Strve.js 最新文档地址，欢迎浏览。

https://maomincoding.github.io/strvejs-doc/

原文链接：https://mp.weixin.qq.com/s/2ndyBAQZRro4-9NonHPP2Q