npm上传组件

1.创建项目

npm create vite@latest my-u

2.修改vite.config.ts文件配置

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      // eslint-disable-next-line no-undef
      '@': path.resolve(__dirname, 'src'), // 将 @ 指向 src 目录
    },
  },
  build: {
    lib: {
      // eslint-disable-next-line no-undef
      entry: path.resolve(__dirname, 'src/index.js'),
      name: 'TimeLineEdit',
      fileName: (format) => `time-line-edit.${format}.js`
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['react', 'react-dom'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    },
    watch: {
      include: 'src/**' // 组件热更新
    }
  }
})

3. 修改package.json文件

"main": "./dist/xxx.umd.js",
"module": "./dist/xxx.es.js",
"files": ["dist"],

4.创建入口

在src下创建index.js文件

export { default as Box }  from '@/components/......jsx';

5.打包

npm run build

6.上传npm

npm login
npm publish

当报错npm error 403 403 Forbidden - PUT https://registry.npmjs.org/timeline-edit - Two-factor authentication or granular access token with bypass 2fa enabled is required to publish packages. 时。可输入npm config set //registry.npmjs.org/:_authToken

本地调试

在组件的控制台创建链接

npm link  

在业务项目的位置

npm link Box