@vrx/cp

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

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

特性

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

简单使用

pnpm exec vrx-cp build

.doc.ts 文件

用于生成 web-types.json 与 定义 components.d.ts [key]

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: '标题',
    },
  },
})

配置文件

• vrx-cp.config.{ts,js}

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

import { defineConfig } from '@vrx/cp'
import cssnano from 'cssnano'
import pkg from './package.json'

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 'unplugin-vue-macros/vite'

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

tsconfig.json

{
  "compilerOptions": {
    "types": ["unplugin-vue-macros/macros-global"]
  },
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/define-options",
      "@vue-macros/volar/define-models",
      "@vue-macros/volar/define-props",
      "@vue-macros/volar/define-props-refs",
      "@vue-macros/volar/short-vmodel",
      "@vue-macros/volar/define-slots",
      "@vue-macros/volar/jsx-directive"
    ]
  }
}