style(internal-cli): fix types and lint code (#257)

* fix(cli): fix types and lint code * style(internal-cli): fix types and lint code
2023-06-08 10:15:44 +08:00 · 2023-06-08 10:15:44 +08:00 · 6b1d103d69
parent 302cf2573f
commit 6b1d103d69
17 changed files with 184 additions and 142 deletions
--- a/internals/cli/src/commands/build/build-entry-app.ts
+++ b/internals/cli/src/commands/build/build-entry-app.ts
@ -2,12 +2,18 @@
 * 生成全量运行时入口文件
 */
 import fs from 'fs-extra'
-import { EOL as endOfLine } from 'os'
-import * as utils from '../../shared/utils.js'
-import * as moduleUtils from '../../shared/module-utils.js'
-import handlebarsRender from './handlebars.render.js'
+import { EOL as endOfLine } from 'node:os'
+import {
+  getopentinyVersion,
+  pathFromWorkspaceRoot,
+  capitalizeKebabCase,
+  prettierFormat,
+  logGreen,
+} from '../../shared/utils'
+import { getComponents } from '../../shared/module-utils'
+import handlebarsRender from './handlebars.render'

-const version = utils.getopentinyVersion({})
+const version = getopentinyVersion({ key: 'version' })
 const outputDir = 'packages/vue'
 const MAIN_TEMPLATE = `{{{include}}}
 
@ -22,8 +28,8 @@ const MAIN_TEMPLATE = `{{{include}}}
 `

 const buildFullRuntime = () => {
-  const outputPath = utils.pathFromWorkspaceRoot(outputDir, 'app.ts')
-  const components = moduleUtils.getComponents('pc')
+  const outputPath = pathFromWorkspaceRoot(outputDir, 'app.ts')
+  const components = getComponents('pc')
  const includeTemplate: string[] = []
  const componentsTemplate: string[] = []

@ -39,7 +45,7 @@ const buildFullRuntime = () => {
  components.forEach((item) => {
    // 暂时排除 chart 类组件
    if (item.inEntry !== false && !item.path.includes('chart') && !item.path.includes('river')) {
-      const component = utils.capitalizeKebabCase(item.name)
+      const component = capitalizeKebabCase(item.name)

      componentsTemplate.push(`  ${component}`)
      includeTemplate.push(`import ${item.name} from '${item.importName}'`)
@ -54,11 +60,11 @@ const buildFullRuntime = () => {
    }
  })

-  const output = utils.prettierFormat({ str: template })
+  const output = prettierFormat({ str: template })

  fs.writeFileSync(outputPath, output)

-  utils.logGreen(`npm run build:entry done. [${outputDir}/app.ts]`)
+  logGreen(`npm run build:entry done. [${outputDir}/app.ts]`)
 }

 buildFullRuntime()
--- a/internals/cli/src/commands/build/build-entry.ts
+++ b/internals/cli/src/commands/build/build-entry.ts
@ -2,12 +2,18 @@
 * 生成入口文件，包括 pc.js / mobile.js / mobile-first.js / index.js
 */
 import fs from 'fs-extra'
-import { EOL as endOfLine } from 'os'
-import * as utils from '../../shared/utils.js'
-import * as moduleUtils from '../../shared/module-utils.js'
-import handlebarsRender from './handlebars.render.js'
+import { EOL as endOfLine } from 'node:os'
+import {
+  getopentinyVersion,
+  pathFromWorkspaceRoot,
+  capitalizeKebabCase,
+  prettierFormat,
+  logGreen,
+} from '../../shared/utils'
+import { getComponents } from '../../shared/module-utils'
+import handlebarsRender from './handlebars.render'

-const version = utils.getopentinyVersion({})
+const version = getopentinyVersion({ key: 'version' })
 const outputDir = 'packages/vue'

 const fileNames = {
@ -63,18 +69,18 @@ function getMainTemplate({ mode }) {
 }

 const createEntry = (mode) => {
-  const OUTPUT_PATH = utils.pathFromWorkspaceRoot(outputDir, fileNames[mode])
+  const OUTPUT_PATH = pathFromWorkspaceRoot(outputDir, fileNames[mode])
  const MAIN_TEMPLATE = getMainTemplate({ mode })
  const includeTemplate: string[] = []
  const componentsTemplate: string[] = []
-  const components = moduleUtils.getComponents(mode)
-  const PKG_PATH = utils.pathFromWorkspaceRoot(outputDir, 'package.json')
+  const components = getComponents(mode)
+  const PKG_PATH = pathFromWorkspaceRoot(outputDir, 'package.json')
  const PKGContent = fs.readJSONSync(PKG_PATH)
  const PKGDeps = {}

  components.forEach((item) => {
    if (item.inEntry !== false) {
-      const component = utils.capitalizeKebabCase(item.name)
+      const component = capitalizeKebabCase(item.name)
      PKGDeps[item.importName] = 'workspace:~'
      componentsTemplate.push(`  ${component}`)
      includeTemplate.push(`import ${item.name} from '${item.importName}'`)
@ -95,7 +101,7 @@ const createEntry = (mode) => {
    }
  })

-  const output = utils.prettierFormat({ str: template })
+  const output = prettierFormat({ str: template })

  fs.writeFileSync(OUTPUT_PATH, output)
 }
@ -103,7 +109,7 @@ const createEntry = (mode) => {
 export function buildEntry() {
  ['all', 'pc', 'mobile', 'mobile-first'].forEach(createEntry)

-  utils.logGreen(
+  logGreen(
    `npm run build:entry done. [${outputDir}/index.ts,${outputDir}/pc.ts,${outputDir}/mobile.ts,${outputDir}/mobile-first.ts]`
  )
 }
--- a/internals/cli/src/commands/build/build-runtime.ts
+++ b/internals/cli/src/commands/build/build-runtime.ts
@ -1,11 +1,11 @@
 import path from 'node:path'
 import type { UserConfig } from 'vite'
 import { build } from 'vite'
-import babel from '@rollup/plugin-babel'
-import * as utils from '../../shared/utils.js'
-import type { BuildUiOption } from './build-ui'
-import { pathFromPackages, getBaseConfig, requireModules } from './build-ui'
 import commonjs from '@rollup/plugin-commonjs'
+import babel from '@rollup/plugin-babel'
+import { logGreen } from '../../shared/utils'
+import type { BuildUiOption, BaseConfig } from './build-ui'
+import { pathFromPackages, getBaseConfig, requireModules } from './build-ui'

 async function batchBuildAll({ vueVersion, tasks, message, emptyOutDir, npmScope, min }) {
  const rootDir = pathFromPackages('')
@ -40,16 +40,16 @@ async function batchBuildAll({ vueVersion, tasks, message, emptyOutDir, npmScope

  async function batchBuild({ vueVersion, tasks, message, emptyOutDir, npmScope, min }) {
    if (tasks.length === 0) return
-    utils.logGreen(`====== 开始构建 ${message} ======`)
+    logGreen(`====== 开始构建 ${message} ======`)

    const entry = toEntry(tasks)
    const baseConfig = getBaseConfig({
      vueVersion,
-      dtsInclude: [],
+      dtsInclude: [] as string[],
      dts: false,
      npmScope,
      isRuntime: true
-    }) as UserConfig
+    } as BaseConfig) as UserConfig

    baseConfig.define = Object.assign(baseConfig.define || {}, {
      'process.env.BUILD_TARGET': JSON.stringify(vueVersion !== '3' ? 'runtime' : 'component'),
@ -60,15 +60,17 @@ async function batchBuildAll({ vueVersion, tasks, message, emptyOutDir, npmScope
    })

    baseConfig.plugins?.push(
-      commonjs({
-        include: /node_modules/,
-        requireReturnsDefault: true,
-        defaultIsModuleExports: true
-      }),
-      babel({
-        extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx'],
-        presets: ['@babel/preset-env']
-      })
+      ...[
+        commonjs({
+          include: /node_modules/,
+          requireReturnsDefault: true,
+          defaultIsModuleExports: true
+        }),
+        babel({
+          extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx'],
+          presets: ['@babel/preset-env']
+        })
+      ] as any[]
    )

    await build({
--- a/internals/cli/src/commands/build/build-ui.ts
+++ b/internals/cli/src/commands/build/build-ui.ts
@ -5,14 +5,18 @@ import path from 'node:path'
 import { build, defineConfig } from 'vite'
 import dtsPlugin from 'vite-plugin-dts'
 import vue3SvgPlugin from 'vite-svg-loader'
-import { getAlias, pathFromWorkspaceRoot } from '../../config/vite.js'
-import * as config from '../../shared/config.js'
-import type { Module } from '../../shared/module-utils.js'
-import { getAllIcons, getAllModules, getByName } from '../../shared/module-utils.js'
-import * as utils from '../../shared/utils.js'
-import generatePackageJsonPlugin from './rollup/generate-package-json.js'
-import inlineChunksPlugin from './rollup/inline-chunks.js'
-import replaceModuleNamePlugin from './rollup/replace-module-name.js'
+import { getAlias, pathFromWorkspaceRoot } from '../../config/vite'
+import { external } from '../../shared/config'
+import type { Module } from '../../shared/module-utils'
+import { getAllIcons, getAllModules, getByName } from '../../shared/module-utils'
+import {
+  logGreen,
+  kebabCase,
+  capitalizeKebabCase,
+} from '../../shared/utils'
+import generatePackageJsonPlugin from './rollup/generate-package-json'
+import inlineChunksPlugin from './rollup/inline-chunks'
+import replaceModuleNamePlugin from './rollup/replace-module-name'

 export const pathFromPackages = (...args) => pathFromWorkspaceRoot('packages', ...args)
 export const require = createRequire(import.meta.url)
@ -52,7 +56,17 @@ export const getVuePlugins = (vueVersion: string) => {

 export const ns = (ver) => ({ '2': '', '2.7': '2', '3': '3' }[ver] || '')

-export const getBaseConfig = ({ vueVersion, dtsInclude, dts, buildTarget, themeVersion, isRuntime }) => {
+export interface BaseConfig {
+  vueVersion: string
+  dtsInclude: string[] | Set<string>
+  dts: boolean
+  buildTarget: string
+  themeVersion: string
+  npmScope?: string
+  isRuntime: boolean
+}
+
+export const getBaseConfig = ({ vueVersion, dtsInclude, dts, buildTarget, themeVersion, isRuntime }: BaseConfig) => {
  // 处理tsconfig中配置，主要是处理paths映射，确保dts可以找到正确的包
  const compilerOptions = require(pathFromWorkspaceRoot(`tsconfig.vue${vueVersion}.json`)).compilerOptions

@ -189,10 +203,10 @@ async function batchBuildAll({ vueVersion, tasks, formats, message, emptyOutDir,

  async function batchBuild({ vueVersion, tasks, formats, message, emptyOutDir, dts }) {
    if (tasks.length === 0) return
-    utils.logGreen(`====== 开始构建 ${message} ======`)
+    logGreen(`====== 开始构建 ${message} ======`)
    const entry = toEntry(tasks)

-    const dtsInclude = toTsInclude(tasks)
+    const dtsInclude = toTsInclude(tasks) as BaseConfig['dtsInclude']
    await build({
      configFile: false,
      ...getBaseConfig({ vueVersion, dtsInclude, dts, buildTarget, themeVersion, isRuntime: false }),
@ -203,7 +217,7 @@ async function batchBuildAll({ vueVersion, tasks, formats, message, emptyOutDir,
          plugins: [
            getBabelOutputPlugin({
              presets: [['@babel/preset-env', { loose: true, modules: false }]]
-            })
+            }) as any
          ],
          external: (source, importer, isResolved) => {
            // vite打包入口文件或者没有解析过得包不能排除依赖
@ -223,7 +237,7 @@ async function batchBuildAll({ vueVersion, tasks, formats, message, emptyOutDir,

            if (/src\/index/.test(importer)) {
              // 模块入口，pc/mobile 文件要分离，同时排除 node_modules 依赖
-              return /^\.\/(pc|mobile|mobile-first)/.test(source) || config.external(source)
+              return /^\.\/(pc|mobile|mobile-first)/.test(source) || external(source)
            }

            // @opentiny/vue 总入口，需要排除所有依赖
@ -231,7 +245,7 @@ async function batchBuildAll({ vueVersion, tasks, formats, message, emptyOutDir,
              return true
            }

-            return config.external(source)
+            return external(source)
          },
          output: {
            strict: false,
@ -268,8 +282,8 @@ function getEntryTasks(): Module[] {
    dtsRoot: true,
    libPath: `vue/${mode}`,
    type: 'module',
-    name: utils.kebabCase({ str: '@opentiny/vue' }),
-    global: utils.capitalizeKebabCase('opentinyVue'),
+    name: kebabCase({ str: '@opentiny/vue' }),
+    global: capitalizeKebabCase('opentinyVue'),
    importName: '@opentiny/vue'
  }))
 }
@ -283,7 +297,7 @@ function getTasks(names: string[]): Module[] {
  return names
    .map((name) =>
      getByName({
-        name: utils.kebabCase({ str: name.replace('@opentiny/vue-', '') }),
+        name: kebabCase({ str: name.replace('@opentiny/vue-', '') }),
        isSort: false
      })
    )
@ -315,7 +329,7 @@ export async function buildUi(

  // 如果指定了打包icon或者没有传入任何组件
  if (names.some((name) => name.includes('icon')) || !names.length) {
-    tasks.push(...getByName({ name: utils.kebabCase({ str: 'icon-saas' }), isSort: false }))
+    tasks.push(...getByName({ name: kebabCase({ str: 'icon-saas' }), isSort: false }))
    tasks.push(...getAllIcons())
  }

--- a/internals/cli/src/commands/build/index.ts
+++ b/internals/cli/src/commands/build/index.ts
@ -1,3 +1,3 @@
-export * from './build-ui.js'
-export * from './build-entry.js'
+export * from './build-ui'
+export * from './build-entry'
 export * from './build-runtime'
--- a/internals/cli/src/commands/build/rollup/inline-chunks.ts
+++ b/internals/cli/src/commands/build/rollup/inline-chunks.ts
@ -54,6 +54,7 @@ export default function ({ deleteInlinedFiles = true }): Plugin {
        // 删除 chunks
        bundlesToDelete.forEach((name) => {
          delete bundle[name]
+          // eslint-disable-next-line no-console
          console.log(`\n${chalk.red(name)} 已经被内联并删除`)
        })
      }
--- a/internals/cli/src/commands/clean.ts
+++ b/internals/cli/src/commands/clean.ts
@ -1,12 +1,12 @@
-import path from 'path'
+import path from 'node:path'
 import { removeSync } from 'fs-extra'
-import * as utils from './utils'
+import { walkFileTree, pathJoin, logGreen, logRed } from '../shared/utils'

 /**
 * 删除 packages 项目包下插件内部的 dist、runtime、node_modules 文件
 */
 const deleteDistFile = () => {
-  utils.walkFileTree({
+  walkFileTree({
    isDeep: true,
    fileFilter({ file, subPath, isDirectory }) {
      let flag = true
@ -22,7 +22,7 @@ const deleteDistFile = () => {

      return flag
    },
-    dirPath: utils.pathJoin('..', 'packages'),
+    dirPath: pathJoin('..', 'packages'),
    callback() {
      // empty
    }
@ -42,7 +42,7 @@ try {
    removeSync(path.join(__dirname, '..', 'packages', name + '.js'))
  })

-  utils.logGreen('npm run clean:build done.')
+  logGreen('npm run clean:build done.')
 } catch (e) {
-  utils.logRed('npm run clean:build failed.', e)
+  logRed('npm run clean:build failed.')
 }
--- a/internals/cli/src/commands/create/create-icon-saas.ts
+++ b/internals/cli/src/commands/create/create-icon-saas.ts
@ -4,7 +4,7 @@
 import path from 'node:path'
 import fs from 'fs-extra'
 import { searchForWorkspaceRoot } from 'vite'
-import { filesFragmentReplace } from '../../shared/utils.js'
+import { filesFragmentReplace } from '../../shared/utils'

 const ROOT_PATH = searchForWorkspaceRoot(process.cwd())
 const packages = path.join(ROOT_PATH, 'packages')
--- a/internals/cli/src/commands/create/create-mapping.ts
+++ b/internals/cli/src/commands/create/create-mapping.ts
@ -1,6 +1,6 @@
 import path from 'node:path'
 import fs from 'fs-extra'
-import * as utils from '../../shared/utils'
+import { capitalize, walkFileTree, pathFromWorkspaceRoot, logGreen, logRed } from '../../shared/utils'
 import { writeModuleMap, quickSort } from '../../shared/module-utils'
 import commonMapping from './commonMapping.json'

@ -30,7 +30,7 @@ const getTemplateName = (currentPaths, entryObj) => {
  }
  const mapKey = Object.keys(entryObj).filter(item => entryObj[item] && item !== 'isBuildEntryFile')[0]
  const subFix = entryMaps[mapKey]
-  return `${currentPaths.split('-').map(utils.capitalize).join('')}${subFix}`
+  return `${currentPaths.split('-').map(capitalize).join('')}${subFix}`
 }

 const tempMap = {
@ -47,9 +47,9 @@ const makeModules = () => {

  // 获取存放所有组件的文件夹
  const packagesStr = 'packages/vue/src'
-  utils.walkFileTree({
+  walkFileTree({
    isDeep: true,
-    dirPath: utils.pathFromWorkspaceRoot(packagesStr),
+    dirPath: pathFromWorkspaceRoot(packagesStr),
    fileFilter({ file }) {
      return !/node_modules|helper|common|assets/.test(file)
    },
@ -97,7 +97,7 @@ const makeModules = () => {
 try {
  makeModules()

-  utils.logGreen('npm run create:mapping done.')
+  logGreen('npm run create:mapping done.')
 } catch (e) {
-  utils.logRed(e)
+  logRed(e)
 }
--- a/internals/cli/src/commands/create/create-ui.ts
+++ b/internals/cli/src/commands/create/create-ui.ts
@ -5,21 +5,28 @@
 * yarn create:ui img-preview -single 输出纯净模板（没有 pc 等模板/单层组件）
 * yarn create:ui img-preview -mobile 创建纯移动组件
 */
-import path from 'path'
+import path from 'node:path'
 import fs from 'fs-extra'
 import semver from 'semver'
-import * as utils from '../../shared/utils'
+import {
+  getInputCmd,
+  pathJoin,
+  walkFileTree,
+  capitalizeKebabCase,
+  logGreen,
+  logYellow
+} from '../../shared/utils'
 import { createModuleMapping } from '../../shared/module-utils'
 import handlebarsRender from '../build/handlebars.render'

-const args = utils.getInputCmd()
+const args = getInputCmd()

 if (args.length > 0) {
  const commands: string[] = []
  const components: string[] = []
-  const templateDir = utils.pathJoin('../../public/template/component')
-  const componetDir = utils.pathJoin('../../../../packages/vue/src')
-  const { version } = fs.readJSONSync(utils.pathJoin('../../../../packages/vue/package.json'))
+  const templateDir = pathJoin('../../public/template/component')
+  const componetDir = pathJoin('../../../../packages/vue/src')
+  const { version } = fs.readJSONSync(pathJoin('../../../../packages/vue/package.json'))

  args.forEach((item) => {
    if (item.indexOf('-') === 0) {
@ -36,11 +43,11 @@ if (args.length > 0) {
    let componentPath = path.join(componetDir, componentName)

    if (fs.existsSync(componentPath)) {
-      utils.logYellow(`The component name : ${componentName} is exist , please enter other name.`)
+      logYellow(`The component name : ${componentName} is exist , please enter other name.`)
      return
    }

-    utils.walkFileTree({
+    walkFileTree({
      isDeep: true,
      dirPath: templateDir,
      callback({ file, subPath }) {
@ -70,7 +77,7 @@ if (args.length > 0) {
        componentPath = path.join(componentPath, fileName)

        let fileContent = fs.readFileSync(subPath, { encoding: 'utf8' })
-        const upperComponentName = utils.capitalizeKebabCase(componentName)
+        const upperComponentName = capitalizeKebabCase(componentName)

        // 编译模板
        fileContent = handlebarsRender({
@ -92,7 +99,7 @@ if (args.length > 0) {
    createModuleMapping(componentName, isMobile)
  })

-  utils.logGreen('npm run create:ui done.')
+  logGreen('npm run create:ui done.')
 } else {
-  utils.logYellow('please enter the component name after command.')
+  logYellow('please enter the component name after command.')
 }
--- a/internals/cli/src/commands/create/index.ts
+++ b/internals/cli/src/commands/create/index.ts
@ -1 +1 @@
-export * from './create-icon-saas.js'
+export * from './create-icon-saas'
--- a/internals/cli/src/commands/sync/sync-icons.ts
+++ b/internals/cli/src/commands/sync/sync-icons.ts
@ -1,29 +1,37 @@
 /**
 * 初始化/创建 ICON 组件，从 @opentiny/vue-theme/svgs 中提取 SVG 图标创建对应的 ICON 组件
 */
-const path = require('path')
-const fs = require('fs-extra')
-const utils = require('./utils')
-const semver = require('semver')
-const { EOL } = require('os')
-const handlebarsRender = require('./handlebars.render')
+import path from 'node:path'
+import fs from 'fs-extra'
+import semver from 'semver'
+import { EOL } from 'node:os'
+import handlebarsRender from '../build/handlebars.render'
+import {
+  pathJoin,
+  logYellow,
+  getopentinyVersion,
+  capitalizeKebabCase,
+  prettierFormat,
+  logGreen,
+  logRed
+} from '../../shared/utils'

 const svgRE = /\.svg$/
-const svgDir = utils.pathJoin('..', 'node_modules', '@opentiny', 'theme', 'svgs')
-const iconDir = utils.pathJoin('..', 'packages', 'icon')
+const svgDir = pathJoin('..', 'node_modules', '@opentiny', 'theme', 'svgs')
+const iconDir = pathJoin('..', 'packages', 'icon')
 const packageJson = 'package.json'
-const templatePath = utils.pathJoin('..', 'template')
+const templatePath = pathJoin('..', 'template')

 // 检查是否按照依赖包
 if (!fs.existsSync(svgDir)) {
-  utils.logYellow(`The @opentiny/vue-theme is not exist , please npm install @opentiny/vue-theme.`)
+  logYellow('The @opentiny/vue-theme is not exist , please npm install @opentiny/vue-theme.')
 }

 // 是否包含 package/icon 目录
 if (!fs.existsSync(iconDir)) {
  fs.mkdirSync(iconDir)

-  const version = utils.getopentinyVersion()
+  const version = getopentinyVersion({ key: 'version' })
  const iconTemplate = fs.readJSONSync(path.join(templatePath, 'component', packageJson))

  // 删除多余的依赖
@ -43,8 +51,8 @@ if (!fs.existsSync(iconDir)) {
  fs.writeFileSync(path.join(iconDir, packageJson), packageContent)
 }

-const exportComponents = []
-const exportIcons = []
+const exportComponents: string[] = []
+const exportIcons: string[] = []
 const componentTemplate = fs.readFileSync(path.join(templatePath, 'icon', 'index.ts'), { encoding: 'utf8' })

 // 根据 @opentiny/vue-theme/svgs 中的 svg 图片创建对应的 icon 组件
@ -56,7 +64,7 @@ fs.readdirSync(svgDir).forEach((fileName) => {
    if (!fs.existsSync(iconPath)) {
      fs.mkdirSync(iconPath)

-      const iconName = utils.capitalizeKebabCase(svgName)
+      const iconName = capitalizeKebabCase(svgName)
      const fullIconName = `Icon${iconName}`
      const iconEntryContent = handlebarsRender({
        template: componentTemplate,
@ -67,7 +75,7 @@ fs.readdirSync(svgDir).forEach((fileName) => {
        delimiter: ['\\[\\[', '\\]\\]']
      })

-      fs.writeFileSync(path.join(iconPath, 'index.ts'), utils.prettierFormat({ str: iconEntryContent }))
+      fs.writeFileSync(path.join(iconPath, 'index.ts'), prettierFormat({ str: iconEntryContent }))

      exportComponents.push(`import ${fullIconName} from './${svgName}'`)
      exportIcons.push(fullIconName)
@ -78,7 +86,7 @@ fs.readdirSync(svgDir).forEach((fileName) => {
 if (exportComponents.length) {
  fs.writeFileSync(
    path.join(iconDir, 'index.ts'),
-    utils.prettierFormat({
+    prettierFormat({
      str: `${exportComponents.join(EOL)}

  export {
@ -92,7 +100,7 @@ if (exportComponents.length) {
    })
  )

-  utils.logGreen('npm run create:icon done.')
+  logGreen('npm run create:icon done.')
 } else {
-  utils.logRed('npm run create:icon fail.')
+  logRed('npm run create:icon fail.')
 }
--- a/internals/cli/src/config/vite.ts
+++ b/internals/cli/src/config/vite.ts
@ -1,6 +1,6 @@
 import path from 'node:path'
 import { searchForWorkspaceRoot } from 'vite'
-import { getAllModules } from '../shared/module-utils.js'
+import { getAllModules } from '../shared/module-utils'

 const workspaceRoot = searchForWorkspaceRoot(process.cwd())
 const pathFromWorkspaceRoot = (...args) => path.resolve(workspaceRoot, ...args)
--- a/internals/cli/src/index.ts
+++ b/internals/cli/src/index.ts
@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { Command, Option } from 'commander'
-import { buildUi, buildEntry, buildRuntime } from './commands/build/index.js'
+import { buildUi, buildEntry, buildRuntime } from './commands/build'

 const program = new Command()

--- a/internals/cli/src/shared/module-utils.ts
+++ b/internals/cli/src/shared/module-utils.ts
@ -6,10 +6,16 @@ import * as fs from 'fs-extra'
 import path from 'node:path'
 import { createRequire } from 'node:module'
 import fg from 'fast-glob'
-import * as utils from './utils'
+import {
+  pathFromWorkspaceRoot,
+  capitalizeKebabCase,
+  kebabCase,
+  prettierFormat,
+  pathJoin
+} from './utils'

 const require = createRequire(import.meta.url)
-const moduleMap = require(utils.pathFromWorkspaceRoot('packages/modules.json'))
+const moduleMap = require(pathFromWorkspaceRoot('packages/modules.json'))

 type mode = 'pc' | 'mobile' | 'mobile-first'

@ -66,10 +72,8 @@ const getModuleInfo = (key: string) => {
 * @param {Boolean} isOriginal 是否取原始数据
 * @param {Boolean} isSort 是否需要排序
 */
-const getByName = (
-  { name, inversion = false, isOriginal = false, isSort = true }:
-  { name: string;inversion: boolean;isOriginal: boolean;isSort: boolean }
-) => {
+const getByName = ({ name, isSort = true, inversion = false, isOriginal = false }:
+{ name: string; isSort: boolean; inversion?: boolean; isOriginal?: boolean }) => {
  const callback = (item) => {
    const result = new RegExp(`/${name}/|^vue-${name}/`).test(item.path)
    return inversion ? !result : result
@ -122,10 +126,10 @@ const getSortModules = ({ filterIntercept, isSort = true }: { filterIntercept: F
      // 这段逻辑暂时没有用到
      const componentName = dirs.slice(1, dirs.indexOf('src'))
      // UpperName: Todo
-      component.UpperName = utils.capitalizeKebabCase(componentName.pop() ?? '')
+      component.UpperName = capitalizeKebabCase(componentName.pop() ?? '')

      // LowerName: todo
-      component.LowerName = utils.kebabCase({ str: component.UpperName })
+      component.LowerName = kebabCase({ str: component.UpperName })

      // 工程的父文件夹
      component.parentDir = componentName
@ -166,7 +170,7 @@ const getSortModules = ({ filterIntercept, isSort = true }: { filterIntercept: F
      // global: 'TinyTodoPc'
      component.global = 'Tiny' + key

-      component.importName = `@opentiny/vue-${utils.kebabCase({ str: key })}`
+      component.importName = `@opentiny/vue-${kebabCase({ str: key })}`

      // "vue-common/src/index.ts" ==> "vue-common/lib/index"
      if (component.type === 'module') {
@ -380,10 +384,8 @@ const getComponents = (mode, isSort = true) => {
 * @param {Oject} newObj 新增对象
 * @returns 模块对象
 */
-export const addModule = (
-  { componentName, templateName, newObj = {} }:
-  { componentName: string; templateName?: string; newObj?: object; isMobile: boolean }
-) => {
+export const addModule = ({ componentName, templateName, newObj = {}, isMobile }:
+{ componentName: string; templateName?: string; newObj?: object; isMobile: boolean }) => {
  const isEntry = templateName?.endsWith('index') ?? false
  return {
    path: `vue/src/${componentName}/` + (isEntry ? `${templateName}.ts` : `src/${templateName}.vue`),
@ -400,8 +402,8 @@ export const addModule = (
 */
 export const writeModuleMap = (moduleMap) => {
  fs.writeFileSync(
-    utils.pathFromWorkspaceRoot('packages/modules.json'),
-    utils.prettierFormat({
+    pathFromWorkspaceRoot('packages/modules.json'),
+    prettierFormat({
      str: typeof moduleMap === 'string' ? moduleMap : JSON.stringify(moduleMap),
      options: {
        parser: 'json',
@ -423,7 +425,7 @@ export const readModuleMap = () => moduleMap || {}
 * @param {Boolean} isMobile 是否为移动组件
 */
 const createModuleMapping = (componentName, isMobile = false) => {
-  const upperName = utils.capitalizeKebabCase(componentName)
+  const upperName = capitalizeKebabCase(componentName)

  // 生成 modules.json 文件
  moduleMap[upperName] = addModule({
@ -434,8 +436,8 @@ const createModuleMapping = (componentName, isMobile = false) => {
  const moduleJson = quickSort({ sortData: moduleMap, returnType: 'object' })

  fs.writeJsonSync(
-    utils.pathJoin('..', 'modules.json'),
-    utils.prettierFormat({
+    pathJoin('..', 'modules.json'),
+    prettierFormat({
      str: JSON.stringify(moduleJson),
      options: {
        parser: 'json',
@ -446,7 +448,7 @@ const createModuleMapping = (componentName, isMobile = false) => {
 }

 const getAllIcons = () => {
-  const entries = fg.sync('vue-icon*/src/*', { cwd: utils.pathFromWorkspaceRoot('packages'), onlyDirectories: true })
+  const entries = fg.sync('vue-icon*/src/*', { cwd: pathFromWorkspaceRoot('packages'), onlyDirectories: true })

  return entries.map((item) => {
    const name = path.basename(item)
@ -456,8 +458,8 @@ const getAllIcons = () => {
      libPath: item.replace('/src/', '/lib/'),
      type: 'component',
      componentType: 'icon',
-      name: utils.kebabCase({ str: name }),
-      global: utils.capitalizeKebabCase(name),
+      name: kebabCase({ str: name }),
+      global: capitalizeKebabCase(name),
      importName: '@opentiny/vue-' + item
    } as Module
  })
--- a/internals/cli/src/shared/utils.ts
+++ b/internals/cli/src/shared/utils.ts
@ -129,7 +129,7 @@ const kebabCase = ({ str, splitChar = '-' }: { str: string; splitChar?: string }
 * @param {String} str 格式字符
 * @param {Object} options 格式字符
 */
-const prettierFormat = ({ str, options = {} }: { str: string; options: object }) => {
+const prettierFormat = ({ str, options = {} }: { str: string; options?: object }) => {
  return prettier.format(
    str,
    Object.assign(
@ -156,10 +156,8 @@ const prettierFormat = ({ str, options = {} }: { str: string; options: object })
 * @param {Function} fileFilter 文件筛选拦截函数
 * @param {Function} callback 遍历回调
 */
-const walkFileTree = (
-  { dirPath, isDeep = false, fileFilter, callback }:
-  { dirPath: string; isDeep: boolean; fileFilter?: Function; callback: Function }
-) => {
+const walkFileTree = ({ dirPath, isDeep = false, fileFilter, callback }:
+{ dirPath: string; isDeep: boolean; fileFilter?: Function; callback: Function }) => {
  if (!dirPath || typeof callback !== 'function') {
    return
  }
@ -207,10 +205,8 @@ const getVersion = ({ name, context, isVue2 }: { name: string; context: string;
 * @param {Boolean} 是否为 vue2 环境
 * @returns 版本号
 */
-const getComponentVersion = (
-  { name, context = '..', dir = 'packages', isOrigin = false, isVue2 }:
-  { name: string; context?: string; dir?: string; isOrigin?: boolean; isVue2: boolean }
-) => {
+const getComponentVersion = ({ name, context = '..', dir = 'packages', isOrigin = false, isVue2 }:
+{ name: string; context?: string; dir?: string; isOrigin?: boolean; isVue2: boolean }) => {
  let version: string
  const packageJSONPath = pathJoin(context, dir, name, 'package.json')

@ -476,7 +472,7 @@ const fragmentReplace = (filePath, regExpStr, targetStr) => {
 * @param {Array<string> | string} regExpStr
 * @param {Array<string> | string} targetStr
 */
-const filesFragmentReplace = (folderPath, regExpStr: Array<string> | string, targetStr: Array<string> | string) => {
+const filesFragmentReplace = (folderPath, regExpStr: Array<string | RegExp> | string | RegExp, targetStr: Array<string> | string) => {
  let filesPath = getFilesPath(folderPath)

  if (filesPath) {
--- a/internals/cli/src/shared/vue-fragment.ts
+++ b/internals/cli/src/shared/vue-fragment.ts
@ -1,6 +1,6 @@
-const fs = require('fs-extra')
-const path = require('path')
-const { filesFragmentReplace, logYellow, isBuildForVue2, logGreen } = require('./utils')
+import * as fs from 'fs-extra'
+import path from 'node:path'
+import { filesFragmentReplace, logYellow, isBuildForVue2, logGreen } from './utils'

 const replaceVue3Type = process.env.REPLACE_VUE3_TYPE

@ -25,9 +25,9 @@ if (replaceVue3Type === 'typings') {
          /'virtual:locale\/vue'/g
        ],
        [
-          "'./vue2'",
-          "'./types/vue2'",
-          "'./vue2'"
+          '\'./vue2\'',
+          '\'./types/vue2\'',
+          '\'./vue2\''
        ]
      )
    } else {
@ -54,9 +54,9 @@ if (replaceVue3Type === 'typings') {
          /'virtual:locale\/vue'/g
        ],
        [
-          "'./vue3'",
-          "'./types/vue3'",
-          "'./vue3'"
+          '\'./vue3\'',
+          '\'./types/vue3\'',
+          '\'./vue3\''
        ]
      )
    } else {