前言

為什么要寫這篇文章呢?是因為最近一直在搞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