Vue3 企業級優雅實戰 - 組件庫框架 - 10 實作組件庫 cli - 下

上文創建了一堆 utils、component-info，并實作了新組件模塊相關目錄和檔案的創建，本文繼續實作后面的內容，

1 組件樣式檔案并匯入

在 src/service 目錄中創建 init-scss.ts 檔案，該檔案匯出 initScss 函式，

由于 .vue 型別的組件的樣式就直接寫在了 style 中，故首先判斷組件型別是否是 tsx，tsx 型別的組件才進行這一步的操作：

1. 在 scss/components/ 目錄下創建組件的 scss 檔案 _xxx.module.scss；
2. 在 scss/components/index.scss 中匯入 _xxx.module.scss，

1.1 init-scss.ts

代碼實作如下：

import { ComponentInfo } from '../domain/component-info'
import path from 'path'
import { scssTemplate } from '../util/template-utils'
import fs from 'fs'
import { g } from '../util/log-utils'

const updateComponentScssIndex = (scssRootPath: string, lineName: string) => {
  const indexScssPath = path.resolve(scssRootPath, 'components/index.scss')

  const content = fs.readFileSync(indexScssPath).toString()
  const newContent = content.substring(0, content.length) + `@use "${lineName}.module";\n`
  fs.writeFileSync(indexScssPath, newContent)
}

/**
 * 創建組件庫 scss 檔案，并在 scss/components/index.scss 中引入該檔案
 */
export const initScss = (componentInfo: ComponentInfo) => new Promise((resolve, reject) => {
  // tsx 型別需要創建scss檔案
  if (componentInfo.type === 'tsx') {
    const { parentPath, lineName, lineNameWithPrefix } = componentInfo
    
    // scss 根目錄（packages/scss）
    const scssRootPath = path.resolve(parentPath, 'scss')

    // 1. 創建組件的 scss 檔案
    const componentScssPath = path.resolve(scssRootPath, `components/_${lineName}.module.scss`)
    fs.writeFileSync(componentScssPath, scssTemplate(lineNameWithPrefix))

    // 2. 在組件庫 scss 入口檔案 （packages/components/index.scss）引入上面創建的檔案
    updateComponentScssIndex(scssRootPath, lineName)

    g('component scss init success')
  }
  resolve(componentInfo)
})

1.2 template-utils.ts

上面的 init-scss.ts 在創建 scss 檔案時呼叫了 template-utils.ts 中的 scssTemplate 函式獲取模板，故需要在 util/template-utils.ts 中添加該函式：

/**
 * scss 檔案模板
 */
export const scssTemplate = (lineNameWithPrefix: string): string => {
  return `@import "../tools";
@import "../acss/mp";
@import "../base/var.module";

@include b('${lineNameWithPrefix}') {
}
`
}

2 添加到組件庫入口模塊

新組件和樣式創建完成，接下來便是將新組件模塊安裝到組件庫入口模塊的依賴中，在 src/service 目錄中創建 update-component-lib.ts 檔案，該檔案匯出函式 updateComponentLib，該函式需要完成兩件事：

1. 在組件庫入口模塊中安裝新組件為依賴；
2. 更新組件庫入口模塊的 index.ts 檔案，引入新組件，

代碼實作如下：

import { ComponentInfo } from '../domain/component-info'
import { execCmd } from '../util/cmd-utils'
import path from 'path'
import { Config } from '../config'
import fs from 'fs'
import { g } from '../util/log-utils'

const updateComponentLibIndex = (libPath: string, componentInfo: ComponentInfo) => {
  const indexPath = path.join(libPath, 'index.ts')
  const content = fs.readFileSync(indexPath).toString()

  const index1 = content.indexOf('// import component end')
  const index2 = content.indexOf('] // components')

  const result = `${content.substring(0, index1)}` +
    `import ${componentInfo.upCamelName} from '${componentInfo.nameWithLib}'\n` +
    content.substring(index1, index2 - 1) +
    `,\n  ${componentInfo.upCamelName}\n` +
    content.substring(index2)

  fs.writeFileSync(indexPath, result)
}

/**
 * 更新組件庫入口
 */
export const updateComponentLib = async (componentInfo: ComponentInfo) => {
  // 組件庫入口的路徑
  const libPath = path.resolve(componentInfo.parentPath, Config.COMPONENT_LIB_NAME)

  // 1. 添加新創建的組件到依賴中
  await execCmd(`cd ${libPath} && pnpm install ${componentInfo.nameWithLib}`)

  // 2. 更新入口 index.ts
  updateComponentLibIndex(libPath, componentInfo)

  g('component library update success')
}

3 組件庫檔案相關檔案

3.1 init-doc.ts

在 src/service 目錄中創建 init-doc.ts 檔案，該檔案匯出函式 initDoc，該函式需要完成三件事：

1. 創建組件的 MarkDown 檔案；
2. 創建組件 MD 檔案中的 demo；
3. 更新組件庫檔案選單，

代碼實作如下：

import { ComponentInfo } from '../domain/component-info'
import { g } from '../util/log-utils'
import path from 'path'
import fs from 'fs'
import { demoTemplate, mdTemplate } from '../util/template-utils'

/**
 * 創建組件檔案、demo及更新選單
 */
export const initDoc = (componentInfo: ComponentInfo) => {
  // 組件庫檔案根路徑
  const docRootPath = path.resolve(componentInfo.parentPath, '../docs')
  const { lineName, lineNameWithPrefix, upCamelName, zhName } = componentInfo

  // 1. 創建組件的 MD 檔案
  fs.writeFileSync(path.resolve(docRootPath, `components/${lineName}.md`), mdTemplate(componentInfo))

  // 2. 創建組件檔案中的 Demo
  fs.mkdirSync(path.resolve(docRootPath, `demos/${lineName}`))
  fs.writeFileSync(path.resolve(docRootPath, `demos/${lineName}/${lineName}-1.vue`), demoTemplate(lineNameWithPrefix))

  // 3. 更新組件庫檔案選單
  const menuPath = path.resolve(docRootPath, 'components.ts')
  const content = fs.readFileSync(menuPath).toString()
  const index = content.indexOf('] // end')
  const result = content.substring(0, index - 1) +
    `,\n  { text: '${upCamelName} ${zhName}', link: '/components/${lineName}' }\n` +
    content.substring(index)
  fs.writeFileSync(menuPath, result)

  g('component document init success')
}

3.2 template-utils.ts

上面的 init-doc.ts 呼叫了 mdTemplate 和 demoTemplate 兩個函式，在 template-utils.ts 中添加這兩個函式：

export const mdTemplate = (componentInfo: ComponentInfo) => {
  return `
# ${componentInfo.upCamelName} ${componentInfo.zhName}

## 基本使用

<preview path="../demos/${componentInfo.lineName}/${componentInfo.lineName}-1.vue" title="基本使用" description=" "></preview>

## 組件 API

### Attributes 屬性

| 引數 | 說明 | 型別 | 可選值 | 默認值 |
|  ----  | ----  | ----  | ----  | ----  |
|  |  |  |  | |

### Methods 方法

| 方法名 | 說明 | 引數 | 回傳值 |
|  ----  | ----  | ----  | ----  |
|  |  |  |  |

### Events 事件

| 事件名 | 說明 | 引數 | 回傳值 |
|  ----  | ----  | ----  | ----  |
|  |  |  |  |

### Slots 插槽

| 插槽名 | 說明 | 引數 |
|  ----  | ----  | ----  |
|  |  |  |
`
}

export const demoTemplate = (lineNameWithPrefix: string) => {
  return `<template>
  <${lineNameWithPrefix}></${lineNameWithPrefix}>
</template>

<script lang="ts" setup>
</script>

<style scoped lang="scss">
</style>
`
}

這兩個函式的模板可以自己去定義，

4 create-component.ts

四個步驟都已實作，最后需要在 src/command/create-component.ts 檔案中的 createNewComponent 函式中完成上面四個 service 的呼叫，

4.1 import

匯入四個service及使用到的其他函式：

import { ComponentInfo } from '../domain/component-info'
import { closeLoading, showLoading } from '../util/loading-utils'
import { g, r } from '../util/log-utils'
import { initComponent } from '../service/init-component'
import { initScss } from '../service/init-scss'
import { updateComponentLib } from '../service/update-component-lib'
import { initDoc } from '../service/init-doc'

4.2 createNewComponent

該函式首先根據用戶輸入，構造 ComponentInfo 物件，然后依次呼叫引入的四個 service，完成組件創建的全部流程：

const createNewComponent = async (componentName: string, description: string, componentType: string) => {
  console.log(componentName, description, componentType)
  showLoading('Generating, please wait...')
  try {
    // 1. 構造 ComponentInfo 物件
    const componentInfo = new ComponentInfo(componentName, description, componentType)
    // 2. 創建組件目錄及檔案
    await initComponent(componentInfo)
    // 3. 創建樣式
    await initScss(componentInfo)
    // 4. 更新組件庫入口
    await updateComponentLib(componentInfo)
    // 5. 組件庫檔案
    initDoc(componentInfo)

    closeLoading()
    g(`component [${componentInfo.lineName} ${componentInfo.zhName}] created done!`)
  } catch (e: any) {
    closeLoading()
    r(e.message)
  }
}

組件庫 cli 就這樣完成了，運行 pnpm run gen，依次輸入組件名、組件中文名，選擇組件型別，便自動完成組件的創建、注冊、檔案的創建了，優雅哥花了大量篇幅介紹 cli 的開發，不僅僅可以在這里使用，通過本案例的實作，希望大家可以將這種方式移植到其他地方，如從 github 拉取代碼模板、自動化 CI/CD 等，

下一篇文章將介紹組件庫的打包構建和發布，

感謝閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，了解更多內容工薇號“程式員優雅哥”，

標籤：其他

上一篇：淺談JS詞法環境

下一篇：js物件的理解