vite 发布npm包-526互联

创建一个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引入编写好的方法测试）

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

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

首先你得先去npm注册一个账号官网
然后在控制台 npm login 进行登录
修改package.json如下

{
  "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"
    }
  }
}

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

.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

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

使用组件

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

npm i vite-vue3-xdd-npm

在组件里引用

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

const { flag, setFlag } = useFlag(false)

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