{
  "name": "@sunwu51/camel-ui",   // 先到npm上搜一下，有没有同名的，保险的方案就是@username/xxx
  "version": "0.0.1",
  "type": "module",
  "main": "dist/camel.umd.js",   // umd模式下的 import require用这个文件
  "module": "dist/camel.es.js",  // es模式下 import require用这个，这个比较重要，前端开发都只用es
  "types": "dist/types/index.d.ts",  // 类型声明的d.ts文件，方便别人引入提供智能提示
  "keywords": [                  // npm的关键字，可有可无
    "react",
    "component",
    "react-aria",
    "camel-ui"
  ],
  "author": "Frank",           // 作者 证书 git仓库， 可有可无
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/sunwu51/camel-ui.git"
  },
  "publishConfig": {          // 声明是public的，带@username的默认是private
    "access": "public"
  },
  "files": [                  // 需要上传到npm的文件，只上传dist即可src等不需要
    "dist"
  ],
  "scripts": {
    //...
  },
  "dependencies": {
    //...
  },
  "peerDependencies": {     // 把react react-dom从dependencies移到peerDependenies，
    "react": "^18.2.0",     // 项目中会自己引入，不要在组件库引入
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    // ...
  }
}
Copy

......

export interface ButtonProps extends BaseProps, AriaButtonOptions<'button'> {}
export interface BadgeProps extends BaseProps {}
export interface CardProps extends BaseProps {}
export interface CheckboxProps extends BaseProps, ToggleStateOptions, AriaCheckboxProps {}
Copy

import './Badge.css'
import {cn} from '../cn'
import { BadgeProps } from '../../types'

function Badge(props: BadgeProps) {
    return <>
        <span className={ cn("badge-container", props.className) } style={{...props.style}}>
            {props.children}
        </span>
    </>
}
Copy

export * from './types';

declare module 'camel-ui' {
  export * from './types';
}
Copy

$ npm i -D vite-plugin-lib-inject-css vite-plugin-dts
Copy

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'// 这里我用的swc如果vite项目没选swc的话，应该是另一个插件
import { libInjectCss } from 'vite-plugin-lib-inject-css'
import dts from 'vite-plugin-dts';
import path from 'path';

export default defineConfig({
  plugins: [react(), 
    libInjectCss(), // 内连css
    dts({           // 生成所有组件的dts声明到dist/types目录
      tsconfigPath: './tsconfig.json', // 指定tsconfig文件
      outDir: 'dist/types',
    }),],

  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'CamelUI',
      fileName: (format) => `camel.${format}.js` // 默认输出format有俩，umd和es
    },
    rollupOptions: {
      external: ['react', 'react-dom'], // 排除react的打包，减小包体积
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
});
Copy

{
    ...
+    "declaration": true,
+    "declarationDir": "./dist/types",
    ...
}
Copy

$ npm run build
Copy

└── 📁dist
    └── camel.es.js
    └── camel.umd.js
    └── index.css
    └── 📁types
        └── App.d.ts
        └── 📁components
            └── 📁Badge
                └── Badge.d.ts
            ...
            └── BaseProps.d.ts
        └── index.d.ts
        └── main.d.ts
        └── types.d.ts
Copy

# 在当前组件库目录下运行
$ npm link

# 然后到一个测试项目中运行
$ npm link @sunwu51/camel-ui # 这里换成你的组件库名
Copy

$ npm login #根据提示完成登录

$ npm publish 
Copy