如何将本地组件库上传到npm上
如何把本地开发的组件发布到npm上面，我们需要去了解vue封装组件的原理，利用vue.use(plugin)这个api, 我们需要把封装好的组件打包成vue库，并提供install方法发布到npm上去，Vue.use(plugin)自动执行插件中的install方法。
我们在这里主要介绍的是怎么把已经开发好的公共组件打包发布到npm上面。首先需要我们调整下目录结构 ----> 创建打包组件的文件 ----> 把打包文件发布到npm上
目录结构
- 在当前项目创建一个打包文件夹packages
- 将每个组件的文件调整下，每个组件下定义src/index (组件内容) 以及与src同级index目录（暴露当前组件）
import { App } from 'vue'
import calendar from './src/index.vue'// 让这个组件可以通过use的形式使用
export default {install(app: App) {app.component('jsq-calendar', calendar)}
}
- 在文件下packages创建index.js文件
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用来打包组件
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文件
{"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官网注册
- npm官网
- 注册账号
代码发布到npm上
- cd 到当前lib文件下
cd lib
- 先查看 npm 的 registry
npm config get registry
- 设置 npm 的 registry 为官方源
npm config set registry https://registry.npmjs.org
- 执行命令 npm login 登录到 npm
npm login
- 执行命令 npm publish 发布到 npm
npm publish
- 登录npm官网 点击packages 查看上传的代码
项目使用
- npm install 项目文件名称
npm install jsq-element-components
- 在项目入口文件引入组件
import App from './App.vue'
// 组件
import jsqUI from 'jsq-element-components'
// 组件样式
import 'jsq-element-components/style.css'const app = createApp(App)
app.use(jsqUI)