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

news2024/9/22 14:34:41

如何把本地开发的组件发布到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)