上文搭建了元件庫 cli 的基礎架子，實現了建立元件時的使用者互動，但遺留了 cli/src/command/create-component.ts 中的 createNewComponent 函數，該函數要實現的功能就是上文開篇提到的 —— 建立一個元件的完整步驟。本文咱們就依次實現那些步驟。（友情提示：本文內容較多，如果你能耐心看完、寫完，一定會有提升）
在實現 cli 的過程中會涉及到元件名稱命名方式的轉換、執行cmd命令等操作，所以在開始實現建立元件前，先準備一些工具類。
在 cli/src/util/ 目錄上一篇文章中已經建立了一個 log-utils.ts 檔案，現繼續建立下列四個檔案：cmd-utils.ts、loading-utils.ts、name-utils.ts、template-utils.ts
該檔案提供一些名稱元件轉換的函數，如轉換為首字母大寫或小寫的駝峰命名、轉換為中劃線分隔的命名等：
/**
* 將首字母轉為大寫
*/
export const convertFirstUpper = (str: string): string => {
return `${str.substring(0, 1).toUpperCase()}${str.substring(1)}`
}
/**
* 將首字母轉為小寫
*/
export const convertFirstLower = (str: string): string => {
return `${str.substring(0, 1).toLowerCase()}${str.substring(1)}`
}
/**
* 轉為中劃線命名
*/
export const convertToLine = (str: string): string => {
return convertFirstLower(str).replace(/([A-Z])/g, '-$1').toLowerCase()
}
/**
* 轉為駝峰命名（首字母大寫）
*/
export const convertToUpCamelName = (str: string): string => {
let ret = ''
const list = str.split('-')
list.forEach(item => {
ret += convertFirstUpper(item)
})
return convertFirstUpper(ret)
}
/**
* 轉為駝峰命名（首字母小寫）
*/
export const convertToLowCamelName = (componentName: string): string => {
return convertFirstLower(convertToUpCamelName(componentName))
}
在命令列中建立元件時需要有 loading 效果，該檔案使用 ora 庫，提供顯示 loading 和關閉 loading 的函數：
import ora from 'ora'
let spinner: ora.Ora | null = null
export const showLoading = (msg: string) => {
spinner = ora(msg).start()
}
export const closeLoading = () => {
if (spinner != null) {
spinner.stop()
}
}
該檔案封裝 shelljs 庫的 execCmd 函數，用於執行 cmd 命令：
import shelljs from 'shelljs'
import { closeLoading } from './loading-utils'
export const execCmd = (cmd: string) => new Promise((resolve, reject) => {
shelljs.exec(cmd, (err, stdout, stderr) => {
if (err) {
closeLoading()
reject(new Error(stderr))
}
return resolve('')
})
})
由於自動建立元件需要生成一些檔案，template-utils.ts 為這些檔案提供函數獲取模板。由於內容較多，這些函數在使用到的時候再討論。
執行 gen 命令時，會提示開發人員輸入元件名、中文名、型別，此外還有一些元件名的轉換，故可以將新元件的這些資訊封裝為一個實體類，後面在各種操作中，傳遞該物件即可，從而避免傳遞一大堆引數。
在 src 目錄下建立 domain 目錄，並在該目錄中建立 component-info.ts ，該類封裝了元件的這些基礎資訊：
import * as path from 'path'
import { convertToLine, convertToLowCamelName, convertToUpCamelName } from '../util/name-utils'
import { Config } from '../config'
export class ComponentInfo {
/** 中劃線分隔的名稱，如：nav-bar */
lineName: string
/** 中劃線分隔的名稱（帶元件字首） 如：yyg-nav-bar */
lineNameWithPrefix: string
/** 首字母小寫的駝峰名 如：navBar */
lowCamelName: string
/** 首字母大寫的駝峰名 如：NavBar */
upCamelName: string
/** 元件中文名 如：左側導航 */
zhName: string
/** 元件型別 如：tsx */
type: 'tsx' | 'vue'
/** packages 目錄所在的路徑 */
parentPath: string
/** 元件所在的路徑 */
fullPath: string
/** 元件的字首 如：yyg */
prefix: string
/** 元件全名 如：@yyg-demo-ui/xxx */
nameWithLib: string
constructor (componentName: string, description: string, componentType: string) {
this.prefix = Config.COMPONENT_PREFIX
this.lineName = convertToLine(componentName)
this.lineNameWithPrefix = `${this.prefix}-${this.lineName}`
this.upCamelName = convertToUpCamelName(this.lineName)
this.lowCamelName = convertToLowCamelName(this.upCamelName)
this.zhName = description
this.type = componentType === 'vue' ? 'vue' : 'tsx'
this.parentPath = path.resolve(__dirname, '../../../packages')
this.fullPath = path.resolve(this.parentPath, this.lineName)
this.nameWithLib = `@${Config.COMPONENT_LIB_NAME}/${this.lineName}`
}
}
上面的實體中參照了 config.ts 檔案，該檔案用於設定元件的字首和元件庫的名稱。在 src 目錄下建立 config.ts：
export const Config = {
/** 元件名的字首 */
COMPONENT_PREFIX: 'yyg',
/** 元件庫名稱 */
COMPONENT_LIB_NAME: 'yyg-demo-ui'
}
上一篇開篇講了，cli 元件新元件要做四件事：
本文剩下的部分分享第一點，其餘三點下一篇文章分享。
在 src 下建立 service 目錄，上面四個內容拆分在不同的 service 檔案中，並統一由 cli/src/command/create-component.ts 呼叫，這樣層次結構清晰，也便於維護。
首先在 src/service 目錄下建立 init-component.ts 檔案，該檔案用於建立新元件模組，在該檔案中要完成如下幾件事：
上面的 8 件事需要在 src/service/init-component.ts 中實現，在該檔案中匯出函數 initComponent 給外部呼叫：
/**
* 建立元件目錄及檔案
*/
export const initComponent = (componentInfo: ComponentInfo) => new Promise((resolve, reject) => {
if (fs.existsSync(componentInfo.fullPath)) {
return reject(new Error('元件已存在'))
}
// 1. 建立元件根目錄
fs.mkdirSync(componentInfo.fullPath)
// 2. 初始化 package.json
execCmd(`cd ${componentInfo.fullPath} && pnpm init`).then(r => {
// 3. 修改 package.json
updatePackageJson(componentInfo)
// 4. 安裝 utils 依賴
execCmd(`cd ${componentInfo.fullPath} && pnpm install @${Config.COMPONENT_LIB_NAME}/utils`)
// 5. 建立元件 src 目錄
fs.mkdirSync(path.resolve(componentInfo.fullPath, 'src'))
// 6. 建立 src/xxx.vue 或s src/xxx.tsx
createSrcIndex(componentInfo)
// 7. 建立 src/types.ts 檔案
createSrcTypes(componentInfo)
// 8. 建立 index.ts
createIndex(componentInfo)
g('component init success')
return resolve(componentInfo)
}).catch(e => {
return reject(e)
})
})
上面的方法邏輯比較清晰，相信大家能夠看懂。其中 3、6、7、8抽取為函數。
**修改 package.json ** ：讀取 package.json 檔案，由於預設生成的 name 屬性為 xxx-xx 的形式，故只需將該欄位串替換為 @yyg-demo-ui/xxx-xx 的形式即可，最後將替換後的結果重新寫入到 package.json。程式碼實現如下：
const updatePackageJson = (componentInfo: ComponentInfo) => {
const { lineName, fullPath, nameWithLib } = componentInfo
const packageJsonPath = `${fullPath}/package.json`
if (fs.existsSync(packageJsonPath)) {
let content = fs.readFileSync(packageJsonPath).toString()
content = content.replace(lineName, nameWithLib)
fs.writeFileSync(packageJsonPath, content)
}
}
建立元件的本體 xxx.vue / xxx.tsx：根據元件型別（.tsx 或 .vue）讀取對應的模板，然後寫入到檔案中即可。程式碼實現：
const createSrcIndex = (componentInfo: ComponentInfo) => {
let content = ''
if (componentInfo.type === 'vue') {
content = sfcTemplate(componentInfo.lineNameWithPrefix, componentInfo.lowCamelName)
} else {
content = tsxTemplate(componentInfo.lineNameWithPrefix, componentInfo.lowCamelName)
}
const fileFullName = `${componentInfo.fullPath}/src/${componentInfo.lineName}.${componentInfo.type}`
fs.writeFileSync(fileFullName, content)
}
這裡引入了 src/util/template-utils.ts 中的兩個生成模板的函數：sfcTemplate 和 tsxTemplate，在後面會提供。
建立 src/types.ts 檔案：呼叫 template-utils.ts 中的函數 typesTemplate 得到模板，再寫入檔案。程式碼實現：
const createSrcTypes = (componentInfo: ComponentInfo) => {
const content = typesTemplate(componentInfo.lowCamelName, componentInfo.upCamelName)
const fileFullName = `${componentInfo.fullPath}/src/types.ts`
fs.writeFileSync(fileFullName, content)
}
建立 index.ts：同上，呼叫 template-utils.ts 中的函數 indexTemplate 得到模板再寫入檔案。程式碼實現：
const createIndex = (componentInfo: ComponentInfo) => {
fs.writeFileSync(`${componentInfo.fullPath}/index.ts`, indexTemplate(componentInfo))
}
init-component.ts 引入的內容如下：
import { ComponentInfo } from '../domain/component-info'
import fs from 'fs'
import * as path from 'path'
import { indexTemplate, sfcTemplate, tsxTemplate, typesTemplate } from '../util/template-utils'
import { g } from '../util/log-utils'
import { execCmd } from '../util/cmd-utils'
import { Config } from '../config'
init-component.ts 中引入了 template-utils.ts 的四個函數：indexTemplate、sfcTemplate、tsxTemplate、typesTemplate，實現如下：
import { ComponentInfo } from '../domain/component-info'
/**
* .vue 檔案模板
*/
export const sfcTemplate = (lineNameWithPrefix: string, lowCamelName: string): string => {
return `<template>
<div>
${lineNameWithPrefix}
</div>
</template>
<script lang="ts" setup name="${lineNameWithPrefix}">
import { defineProps } from 'vue'
import { ${lowCamelName}Props } from './types'
defineProps(${lowCamelName}Props)
</script>
<style scoped lang="scss">
.${lineNameWithPrefix} {
}
</style>
`
}
/**
* .tsx 檔案模板
*/
export const tsxTemplate = (lineNameWithPrefix: string, lowCamelName: string): string => {
return `import { defineComponent } from 'vue'
import { ${lowCamelName}Props } from './types'
const NAME = '${lineNameWithPrefix}'
export default defineComponent({
name: NAME,
props: ${lowCamelName}Props,
setup (props, context) {
console.log(props, context)
return () => (
<div class={NAME}>
<div>
${lineNameWithPrefix}
</div>
</div>
)
}
})
`
}
/**
* types.ts 檔案模板
*/
export const typesTemplate = (lowCamelName: string, upCamelName: string): string => {
return `import { ExtractPropTypes } from 'vue'
export const ${lowCamelName}Props = {
} as const
export type ${upCamelName}Props = ExtractPropTypes<typeof ${lowCamelName}Props>
`
}
/**
* 元件入口 index.ts 檔案模板
*/
export const indexTemplate = (componentInfo: ComponentInfo): string => {
const { upCamelName, lineName, lineNameWithPrefix, type } = componentInfo
return `import ${upCamelName} from './src/${type === 'tsx' ? lineName : lineName + '.' + type}'
import { App } from 'vue'
${type === 'vue' ? `\n${upCamelName}.name = '${lineNameWithPrefix}'\n` : ''}
${upCamelName}.install = (app: App): void => {
// 註冊元件
app.component(${upCamelName}.name, ${upCamelName})
}
export default ${upCamelName}
`
}
這樣便實現了新元件模組的建立，下一篇文章將分享其餘的三個步驟，並在 createNewComponent 函數中呼叫。
感謝閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支援一下，瞭解更多內容工薇號「程式設計師優雅哥」。