记录vite打包并上传到npm

开始

起因：我们单位这个项目用的vite+react使用print打印 开发环境没问题、一到打包时就卡住、所以我就想单独打包成组件在引用看看还有问题么、结果还真可以！又是离谱的一天

• 首先需要把npm的分支切换成官网地址、因为只有官网地址才能登陆npm账号

这里说一下我是用nrm切换 直接全局下载nrm之后百度搜怎么用就可以
https://www.npmjs.com npm官网地址 没有账号的自己去注册

• 之后就要登录npm 在项目中直接npm login 就行、可能这里会报错、因为切换完npm官网地址需要退出重新进一下编辑器、一定要大退、之后就按要求输入用户名密码就行啦、
• 之后我们说一下vite配置、我把代码放在下面

package.json

{
  "name": "lymn-print-com",
  "main": "./dist/lymn-print-com.cjs",
  "module": "./dist/lymn-print-com.js",
  "version": "0.0.39",
  "private": false,
  "files": [
    "dist"
  ],
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@claviska/jquery-minicolors": "^2.3.6",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "bwip-js": "^4.0.0",
    "canvg": "^3.0.10",
    "chai": "^4.1.2",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "html2canvas": "^1.4.1",
    "jquery": "^3.6.0",
    "jsbarcode": "^3.11.5",
    "jspdf": "^2.5.1",
    "nzh": "^1.0.8",
    "rollup-plugin-copy": "^3.5.0",
    "socket.io-client": "^4.5.1",
    "vite": "^5.2.0"
  }
}

这里说一下files这个很重要 因为没有这个到时候会把所有的文件都传到npm上、其次private一定要设置false 如果需要直接访问你包下的文件一定不要exports这个选项、

vite.config.js

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

// https://vitejs.dev/config/
import copy from 'rollup-plugin-copy'
export default defineConfig({
  plugins: [react()
  ],
  build: {
    lib: {
      entry: 'src/hiprint/hiprint.bundle.js', // 你的库入口文件  
      name: 'HiprintReact9', // 库的名称，将在 UMD 构建中用作全局变量  
      formats: ['es', 'cjs', 'umd'], // 输出的格式  
    },
    rollupOptions: {
      plugins: [
        copy({
          targets: [
            { src: 'src/hiprint/css/*', dest: 'dist/css' },// 将 CSS 复制到 dist 下的目标目录  
            // { src: 'src/hiprint/css/hiprint.css', dest: 'dist/hiprint.css' } // 将 CSS 复制到 dist 下的目标目录  
            // 可以添加更多的 copy 目标  
          ],
          verbose: true,
          flatten: false
        })]
    }
  },
})

这里本打算用copy这个组件复制的、但是一直没有用、之后这些css我还需要、想拉半天才发现自己挺der、直接放public下就可以的 废这么大进、那位大佬知道copy为啥不行可以告诉我一下、谢谢

• 最后npm publish 就可以啦 这就是我研究半天的成果