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

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

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

目录结构

  1. 在当前项目创建一个打包文件夹packages
  2. 将每个组件的文件调整下,每个组件下定义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)
  }
}
  1. 在文件下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)
        })
    }
}

创建打包命令

  1. 创建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()
  1. 在package.json创建打包组件命令:"lib": "node ./build.js"
  2. 执行命令 npm run lib
  3. 在项目文件下会生产lib文件夹,这个就是发布到npm上的文件代码
  4. 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官网注册

  1. npm官网
  2. 注册账号

代码发布到npm上

  1. cd 到当前lib文件下
javascript 复制代码
cd lib 
  1. 先查看 npm 的 registry
javascript 复制代码
npm config get registry
  1. 设置 npm 的 registry 为官方源
javascript 复制代码
npm config set registry https://registry.npmjs.org
  1. 执行命令 npm login 登录到 npm
javascript 复制代码
npm login
  1. 执行命令 npm publish 发布到 npm
javascript 复制代码
npm publish
  1. 登录npm官网 点击packages 查看上传的代码

项目使用

  1. npm install 项目文件名称
javascript 复制代码
npm install jsq-element-components
  1. 在项目入口文件引入组件
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)
相关推荐
冲!!1 分钟前
SCSS 中的Mixins 和 Includes,%是什么意思
前端·css·scss
星语卿1 小时前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing11251 小时前
界面规范11-对话框
javascript·vue.js·elementui
roman_日积跬步-终至千里1 小时前
【系统架构设计(25)】Web应用服务器与现代架构
前端·架构·系统架构
yshhuang2 小时前
在Windows上搭建开发环境
前端·后端
littleplayer2 小时前
Redux在iOS中的使用
前端
跟橙姐学代码2 小时前
Python里的“管家婆”:带你玩转os库的所有神操作
前端·python·ipython
jingling5552 小时前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
UrbanJazzerati2 小时前
可拖拽的进度条组件实战:实现思路与Demo
前端·面试