@vrx/cp

@vrx/cp

为 使用.tsx,.ts,.vue 方案的 vue3 组件库进行打包

该包处于实验阶段，API 不稳定

特性

• 生成.d.ts 文件
• 生成 components.d.ts
• 生成 web-types.json

简单使用

pnpm exec vrx-cp build

组件信息配置文件

用于覆盖自动组件信息解析时遗漏或解析错误的配置

• gendoc.{ts,js,mts,mjs}
• gendoc.{toml,yaml,yml,jsonc,json5,json}

例：

gendoc.ts

import { defineGenDoc } from '@vrx/cp'

export default defineGenDoc([
  {
  name: 'Progress',
  props: {
    percent: {
      type: 'number',
      desc: '百分比 0.1 形式',
    },
    title: {
      type: 'string',
      desc: '标题',
    },
  },
  events: {
    click: {
      desc: '点击事件',
    },
  },
  slots: {
    label: {
      name: 'label',
      desc: '标题',
    },
  },
}
])

gendoc.toml

[[docs]]
name = 'Progress'

[docs.props.percent]
type = 'number'
desc = '百分比 0.1 形式'

[docs.props.title]
type = 'string'
desc = '标题'

[docs.events.click]
desc = '点击事件'

[docs.slots.label]
name = 'label'
desc = '标题'

配置文件

• vrx-cp.config.{ts,js,mts,mjs}
• vrx-cp.{toml,yaml,yml,jsonc,json5,json}
• package.json#vrx-cp

⚠️ 由于vite5.0废弃了cjs module的原因，配置文件在使用 js/ts编写时只能使用esm格式

import { defineConfig } from '@vrx/cp'

export default defineConfig({
  // 入口文件 默认 src/index.ts
  entry: 'src/index.ts',
})

autoprefixer 样式

可以 根据 .browserslistrc 文件自动添加浏览器前缀

# Browsers that we support

last 1 version
> 1%
not dead # no browsers without security updates

试验性功能

watch mode

监听 源码目录，当文件发生改变时，重新执行打包操作

pnpm exec vrx-cp build --watch
# or
pnpm exec vrx-cp watch

vue-macros + volar

配置文件参考

vrx-cp.config.ts

import { defineConfig } from '@vrx/cp'
import VueMacros from 'vue-macros/vite'

export default defineConfig({
  type: ({ vue, vueJsx }) =>
    VueMacros({
      plugins: {
        vue: vue(),
        vueJsx: vueJsx(),
      },
    }),
})

tsconfig.json

{
  "compilerOptions": {
    "types": ["vue-macros/macros-global"]
  },
  "vueCompilerOptions": {
    "plugins": ["vue-macros/volar"]
  }
}