vite 发布npm包

创建一个vite+vue项目

---

安装vite官网文档来搭建项目、然后在安装对应安装包、运行

npm init vite@latest my-vue-app -- --template vue
cd ./my-vue-app
npm i || pnpm i || yarn
npm run dev

对目录进行改造

src 文件夹修改为 examples src --> examples

新增文件夹packages // 用来存放组件或者方法，发布到npm上的

然后项目会出现报错、因为index.html引入的是src文件夹下面的文件

项目下index.html 中script中src引入方式需要改成/examples/main.ts

编写导出的方法（编写完可在examples引入编写好的方法测试）

1. packages文件夹下新建index.ts文件

2. 然后index.ts 文件夹这里只写一个简单vue组合式函数示例、用于true和false之间切换

3. import { ref } from 'vue';
   export const useFlag = (defind: Boolean = false) => {
     const flag = ref(defind)
     const setFlag = (defind: undefined | Boolean) => {
       if(typeof defind === 'undefined') {
         flag.value = !flag.value
         return
       }
       flag.value = defind
     }
     return { flag, setFlag }
   }
   
   

配置vite.config.ts文件

可以看vite官网打包配置 这里

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


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'lib', // 库模式, 打包后文件夹
    lib: {
      entry: resolve(__dirname, './packages'), // 入口
      name: 'viteVue3XddNpm',
			fileName: 'vite-vue3-xdd-npm', // 打包后名字
    },
    rollupOptions: {
      external: ['vue', 'echarts', '@vueuse/core'], // 不想要打包的安装包
      output: {
				// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
				globals: {
					vue: 'Vue'
				},
			},
    }
  }
})

进行打包

如果你打包的组件包含css什么的也会打包进去，整个库都会输出在lib文件夹里面

npm run build // 打包输出lib文件夹

上传npm

1. 首先你得先去npm注册一个账号 官网

2. 然后在控制台 npm login 进行登录

3. 修改package.json如下

4. {
     "name": "vite-vue3-xdd-npm", // 发布到npm的名字，必须是npm上不存在的
     "private": false, // 不设置为私有，设置公开
     "version": "0.0.1",// 版本号，每次版本号需要不一样
     "keywords": ["xdd-npm", "vite-vue3-xdd-npm", "xdd"], // npm上可以通过什么关键字搜索到
     "type": "module",
     "scripts": {
       "dev": "vite",
       "build": "vue-tsc && vite build",
       "preview": "vite preview"
     },
     "dependencies": {
       "@vueuse/core": "^9.13.0",
       "vue": "^3.2.45",
       "echarts": "^5.4.1"
     },
     "devDependencies": {
       "@types/node": "^18.14.6",
       "@vitejs/plugin-vue": "^4.0.0",
       "typescript": "^4.9.3",
       "vite": "^4.1.0",
       "vue-tsc": "^1.0.24"
     },
     "files": ["lib"],
     "main": "lib/vite-vue3-xdd-npm.umd.cjs", // 包函数入口文件
     "module": "lib/vite-vue3-xdd-npm.js", // ems 标准
     "exports": {
       ".":{
         "import" : "./lib/vite-vue3-xdd-npm.js",
         "require": "./lib/vite-vue3-xdd-npm.umd.cjs"
       }
     }
   }
   

5. 添加.npmignore忽略文件（确保上传npm不是所有文件都上传）

6. .DS_Store
   node_modules
   /dist
   
   # local env files
   .env.local
   .env.*.local
   
   # Log files
   pnpm-debug.log*
   npm-debug.log*
   yarn-debug.log*
   yarn-error.log*
   
   # Editor directories and files
   .idea
   .vscode
   *.suo
   *.ntvs*
   *.njsproj
   *.sln
   *.sw*
   
   # 以下是新增的
   # 要忽略目录和指定文件
   .vscode
   examples/
   packages/
   public/
   vite.config.js
   *.map
   *.html
   

7. npm 登录成功后控制台输入 npm publish 进行发布， 发布成功后有邮件提示

使用组件

安装刚刚发布的组件、记得npm镜像切换成npm、不然下载不了

npm i vite-vue3-xdd-npm

在组件里引用

import { useFlag } from 'vite-vue3-xdd-npm'; // 注意我这安装包测试项目并没有这个方法

const { flag, setFlag } = useFlag(false)

到最后大功告成了，嘿嘿嘿~