记录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})]}},
})