dws-build-tool

介绍

vite 打包组件库、项目构建功能模块

安装教程

# 仅仅打包项目
npm i dws-build-tool -D

# 打包组件库需要安装
npm i dws-build-tool typescript vite vue-tsc @types/node -D
npm i dws-build-tool -g

打包报错 supportedTSExtensions

Search string not found: "/supportedTSExtensions = .*(?=;)/"

npm i [email protected] -D
npm i [email protected] -D

使用说明

属性说明

export interface BuildNormalOption {
  isSplitPackage?: boolean // 是否依赖或者组件分包
  packagesStrategy?: { fileName: string; match: string }[]
}

export interface BuildLibOption {
  name: string // 库名称
  entryPath?: string // 单文件入口路径（默认packages/components/index.ts）在单包或者
  sourcemap?: boolean // 是否生成map文件
  isSplitCSS?: boolean // 是否分包
  splitPackageType?: "none" | "custom" | "subpackage" // 拆包类型：无、自定义、子包
  subpackagePath?: string // 子包路径
  libSplitPackage?: { fileName: string; path: string }[] // 组件库拆分多入口
  externalPackage?: string[] //排除包不打包入库（一般为第三方库）
  special_globals?: { [x: string]: string }
}

export interface BuildType {
  normal?: BuildNormalOption // 打包配置
  lib?: BuildLibOption // 打包组件库配置
}

1.打包项目配置

// vite.config.ts
import DwsBuildTool from "dws-build-tool"
import type { BuildType } from "dws-build-tool/src/type"

const buildOption: BuildType = {
  normal: {
    // 是否拆包
    isSplitPackage: true,
    // 拆包策略
    packagesStrategy: [
      // match: 配置当前字段打包成, fileName + ".js"文件
      { fileName: "screenOSBase", match: "/components/screenOS/base/" },
      { fileName: "screenOSZJ", match: "/components/screenOS/ZJ/" },
      { fileName: "screenOSWF", match: "/components/screenOS/WF/" }
    ]
  }
}

export default defineConfig(() => {
  return {
    plugins: [],
    build: DwsBuildTool.MainBuild(buildOption),
    ...
  }
})

2.打包组件库

package.json 配置

{
  ...
  "type": "module", // 解决require() of ES Module问题
  "scripts": {
    "lib": "vite build --mode lib && npm run dts:winDeclare",
    "dts": "vue-tsc",
    "dts:winDeclare": "npm run dts && dwsCJson"
  },
}

运行

npm run lib

在根目录下面创建 bin > config.properties

[lib]
name = 'ccos-dws-ui' # 库名
description = "ui组件库"
isMultiLib = false # 如果打包libMultiPackage，则需要修改为true
path = './lib/ccos-dws-ui/'
declarePath = "./lib/ccos-dws-ui/components/index.d.ts"

[libMultiPackage]
screenOSBase = "./lib/ccos-dws-ui/components/screenOS/base/index.d.ts"
screenOSZJ = "./lib/ccos-dws-ui/components/screenOS/ZJ/index.d.ts"
screenOSWF = "./lib/ccos-dws-ui/components/screenOS/WF/index.d.ts"

[designMenu]  # 生成组件菜单
isBuild = false
path = './lib/ccos-dws-ui/'

[lib] # 组件库
name # 组件库名称
description # 组件库描述
isMultiLib = false # 是否创建自定义多入口组件库
path = './lib/ccos-dws-ui/' # 打包组件库路径、默认路径 ./lib/XXXXX
declarePath = "./lib/ccos-dws-ui/components/index.d.ts"  # 成的声明文件路径

[libMultiPackage] # 当lib中 isMultiLib 为true是需要的 （不要可以不配）
screenOSBase = "./lib/ccos-dws-ui/components/screenOS/base/index.d.ts" # screenOSBase 包的声明文件路径
screenOSZJ = "./lib/ccos-dws-ui/components/screenOS/ZJ/index.d.ts" # screenOSZJ 包的声明文件路径
screenOSWF = "./lib/ccos-dws-ui/components/screenOS/WF/index.d.ts" # screenOSWF 包的声明文件路径

[designMenu]
isBuild = false # 生成大屏设计器的菜单（不要可以不配）
path = './lib/ccos-dws-ui/'路径

修改 tsconfig.json

{
  "compilerOptions": {
    "declarationDir": "./lib/ccos-dws-ui"
  }
}

2.1 单入口 vite.config.ts

// vite.config.ts
import DwsBuildTool from "dws-build-tool"
import type { BuildType } from "dws-build-tool/src/type"

const buildOption: BuildType = {
  lib: {
    name: "ccos-dws-ui", // 库名
    entryPath: "packages/components/index.ts", // 入口文件
    splitPackageType: "none", // 拆包类型不拆包
    isSplitCSS: false, // css是否分包
    externalPackage: ["ccos-frame-sdk"], // 排除文件默认已排除（vue、vue-router、echarts、pinia）
    special_globals: { "ccos-frame-sdk": "ccos-frame-sdk" } // 使用
  }
}

export default defineConfig(() => {
  return {
    build: DwsBuildTool.MainBuild(buildOption),
    ...
  }
})

2.2.自定义多入口 vite.config.ts

// vite.config.ts
import DwsBuildTool from "dws-build-tool"
import type { BuildType } from "dws-build-tool/src/type"

const buildOption: BuildType = {
  lib: {
    name: "ccos-dws-ui", // 库名
    splitPackageType: "custom", // 拆包类型不拆包
    isSplitCSS: false, // css是否分包
    libSplitPackage: [
      { fileName: "screenOSBase", path: "packages/components/screenOS/base/" },
      { fileName: "screenOSZJ", path: "packages/components/screenOS/ZJ/" },
      { fileName: "screenOSWF", path: "packages/components/screenOS/WF/" }
    ],
    externalPackage: ["ccos-frame-sdk"], // 排除文件默认已排除（vue、vue-router、echarts、pinia）
    special_globals: { "ccos-frame-sdk": "ccos-frame-sdk" } // 使用
  }
}

export default defineConfig(() => {
  return {
    build: DwsBuildTool.MainBuild(buildOption),
    ...
  }
})

2.3.每个子文件独立成包 vite.config.ts

// vite.config.ts
import DwsBuildTool from "dws-build-tool"
import type { BuildType } from "dws-build-tool/src/type"

const buildOption: BuildType = {
  lib: {
    name: "ccos-dws-ui", // 库名
    splitPackageType: "subpackage", // 拆包类型不拆包
    subpackagePath: "packages/components/index.ts",
    isSplitCSS: false, // css是否分包
    externalPackage: ["ccos-frame-sdk"], // 排除文件默认已排除（vue、vue-router、echarts、pinia）
    special_globals: { "ccos-frame-sdk": "ccos-frame-sdk" } // 使用
  }
}

export default defineConfig(() => {
  return {
    build: DwsBuildTool.MainBuild(buildOption),
    ...
  }
})