记录vite发布react组件到npm

第一步搭建环境直接用vite搭建就行

npm create vite xxx
目录如下

我们只需要改vite.config.ts就可以
代码如下

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import {resolve} from 'path';

import { readFileSync } from 'fs'

const packageJson = JSON.parse(
  readFileSync('./package.json', { encoding: 'utf-8' }),
)
const globals = {
  ...(packageJson?.dependencies || {}),
}

export default defineConfig({
  build: {
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: resolve(__dirname, 'src/components/table/index.tsx'),
      name: 'antd-table-custom',
      // the proper extensions will be added
      fileName: 'antd-table-custom',
      formats: ['es', 'cjs'],
    },

    rollupOptions: {
      //排除不相关的依赖
      external: ['react', 'react-dom', ...Object.keys(globals)],
    },
    outDir: 'lib/dist'
  },
  plugins: [react()],
  resolve: {                                     
    alias: {
        '@': resolve(__dirname, './src')         
    }                                            
}
})

之后npm run build就行啦生成文件入下

之后npm publish 推送
推送时可能报426 Upgrade Required
之后执行下面两行代码就好啦

npm install -g https://tls-test.npmjs.com/tls-test-1.0.0.tgz
npm config set registry https://registry.npmjs.org

但是有个问题还没解决、css样式没生效、现在还在解决