如何将本地组件库上传到npm上

如何把本地开发的组件发布到npm上面，我们需要去了解vue封装组件的原理，利用vue.use(plugin)这个api, 我们需要把封装好的组件打包成vue库，并提供install方法发布到npm上去，Vue.use(plugin)自动执行插件中的install方法。

我们在这里主要介绍的是怎么把已经开发好的公共组件打包发布到npm上面。首先需要我们调整下目录结构 ----> 创建打包组件的文件 ----> 把打包文件发布到npm上

目录结构

在当前项目创建一个打包文件夹packages
将每个组件的文件调整下，每个组件下定义src/index (组件内容) 以及与src同级index目录（暴露当前组件）

在这里插入图片描述

javascript">import { App } from 'vue'
import calendar from './src/index.vue'// 让这个组件可以通过use的形式使用
export default {install(app: App) {app.component('jsq-calendar', calendar)}
}

在文件下packages创建index.js文件

javascript">import { App } from 'vue'
import chooseArea from './chooseArea'
import chooseIcon from './chooseIcon'
import trend from './trend'
......const components = [chooseArea,chooseIcon,trend,......
]
export default {install(app: App) {components.map(item => {app.use(item)})}
}

创建打包命令

创建build.js用来打包组件

javascript">const path = require('path')
const { defineConfig, build } = require('vite')
const vue = require('@vitejs/plugin-vue')
const vueJsx = require('@vitejs/plugin-vue-jsx')
const fxExtra = require('fs-extra')
const fs = require('fs')// 打包入口文件夹
const entryDir = path.resolve(__dirname, '../packages')
// 出口文件夹
const outDir = path.resolve(__dirname, '../lib')// vite基础配置
const baseConfig = defineConfig({configFile: false,publicDir: false,plugins: [vue(), vueJsx()]
})// rollup配置
const rollupOptions = {external: ['vue', 'vue-router'],output: {globals: {vue: 'Vue'}}
}// 全量打包构建
const buildAll = async () => {await build({...baseConfig,build: {rollupOptions,lib: {entry: path.resolve(entryDir, 'index.ts'),name: 'jsq-element-components',fileName: 'jsq-element-components',formats: ['es', 'umd']},outDir}})
}// 单组件打包构建
// name组件名称
const buildSingle = async (name) => {await build({...baseConfig,build: {rollupOptions,lib: {entry: path.resolve(entryDir, name),name: 'index',fileName: 'index',formats: ['es', 'umd']},outDir: path.resolve(outDir, name)}})
}// 每个组件生产package.json
const createPackageJson = (name) => {const fileStr = `{"name": "${name}","main": "index.umd.js","module": "index.es.js","style": "style.css"}`// 输出fxExtra.outputFile(path.resolve(outDir, `${name}/package.json`),fileStr,'utf-8')
}// 打包成库
const buildLib = async () => {await buildAll()// 获取组件名称组成的数组const components = fs.readdirSync(entryDir).filter(name => {const componentDir = path.resolve(entryDir, name)const isDir = fs.lstatSync(componentDir).isDirectory()return isDir && fs.readdirSync(componentDir).includes('index.ts')})// 循环构建for(const name of components) {await buildSingle(name)createPackageJson(name)}
}
buildLib()

在package.json创建打包组件命令：“lib”: "node ./build.js”
执行命令 npm run lib
在项目文件下会生产lib文件夹，这个就是发布到npm上的文件代码
lib文件下执行 npm init -y 生产package.json文件

javascript">{"name": "jsq-element-components", // 组件名称"version": "1.0.0", // 版本号"main": "index.umd.js","module": "index.mjs","types": "index.d.ts","author": {"name": "jsq"},"keywords": ["ts","封装组件","vue-componets"]
}

npm_171">npm官网注册

npm官网
注册账号

npm_175">代码发布到npm上

cd 到当前lib文件下

javascript">cd lib

先查看 npm 的 registry

javascript">npm config get registry

设置 npm 的 registry 为官方源

javascript">npm config set registry https://registry.npmjs.org

执行命令 npm login 登录到 npm

javascript">npm login

执行命令 npm publish 发布到 npm

javascript">npm publish

登录npm官网点击packages 查看上传的代码

项目使用

npm install 项目文件名称

javascript">npm install jsq-element-components

在项目入口文件引入组件

javascript">import App from './App.vue'	
// 组件
import jsqUI from 'jsq-element-components'
// 组件样式
import 'jsq-element-components/style.css'const app = createApp(App)
app.use(jsqUI)