0


使用npm发布自己的组件库

在日常开发中,我们习惯性的会封装一些个性化的组件以适配各种业务场景,突发奇想能不能建一个自己的组件库,今后在各种业务里可以自由下载安装自己的组件。

一. 项目搭建

首先直接使用vue-cli创建一个vue2版本的项目,并下载好elementui,这里我们会尝试封装一个适配上万数据的下拉框组件。

二. 组件准备工作

项目搭建完成后我的目录结构大概是这样的
在这里插入图片描述
通常人们喜欢新建一个packages文件夹专门存放组件,例如我们熟悉的element-ui就是如此,但这里我想了想我本身就有一个components文件夹了,干脆就直接使用这个文件夹做我的组件文件夹了,没必要专门单独新建一个。

这里我们需要建一个index.js文件用于组件的注册操作,以下是文件内容

let components =[]const requireAll = require.context("@/components",true,/index\.vue$/)const modulList = requireAll.keys().map((item)=>requireAll(item))
modulList.forEach(({default: vm })=>{
  components.push(vm)})// 全局引入constinstall=function(Vue){// 遍历组件列表并注册全局组件
  components.forEach((component)=>{//component.name 此处使用到组件vue文件中的 name 属性
    Vue.component("Cl"+ component.name, component)})}let exportData ={
  install,}// 适配单个引入
components.forEach((component)=>{
  component.install=function(Vue){
    Vue.component("Cl"+ component.name, component)}
  exportData[component.name]= component
})exportdefault exportData

简单说下上面的代码

  1. 首先我们创建了一个components数组用来存放我们获取的组件。
  2. 获取组件的方法使用了webpack自带的一写api,可以直接访问到我们指定的文件夹,然后正则匹配出我们需要的组件文件。
  3. 然后写一个install方法用于组件的批量全局注册。
  4. 接着我们map下这个components将所有的组件分别构建一个install方法,这样的话我们就可以拥有全局引用和按需引用两种引用模式了。注意这里按需导入并不能像element-ui那样直接import { Button } from “element-ui”,element-ui可以这样写是因为他使用了babel-plugin-component 插件,可以根据你提供的关键字比如Button去指定文件直接读取,我们要按需导入的话据需要import toolsUi from"element-ui"Vue.use(toolsUi.组件名称)
  5. 最后我们将所有数据直接导出。

三. 构建出发布的包

然后我们需要在package.json里面配置下我们的打包命令,这里我是这样写的

"npmUp":"vue-cli-service build --target lib ./src/components/index.js --name tools_ui --dest tools_ui"
  • vue-cli-service build :对指定文件夹进行打包
  • --target lib:指定构建的目标为库(library)。这将使构建工具以库模式进行构建,生成一个可供他人使用的组件库。
  • ./src/components/index.js:指定入口文件路径。这是你组件库的主要入口文件。
  • --name tools_ui:指定组件库的名称。你的组件库将以 tools_ui 为名称进行构建和导出。
  • --dest tools_ui:指定构建输出的目录。生成的组件库将被输出到名为 tools_ui 的目录中。

然后我们直接执行命令:

npm run npmUp

这个时候我们就可以看到我们打包出来的文件夹了
在这里插入图片描述

四. 发布工作

我们在终端cd进入到我们的tools-ui下,然后npm init -y来初始化一个新的 package.json文件,在这个文件里面配置出我们的包信息,例如版本,名称等。然后我们使用npm adduser进行登录操作(一般会校验用户名,密码等),前提是已经在npm上有自己的账号。最后我们使用npm publish进行发布操作。

注意第一次发布而可能会遇到大大小小的问题,例如node版本,npm版本问题,npm登录问题,包名称重复等问题,需要具体问题具体分析,一般他会有对应的提示。

五 使用组件库

我们可以直接npm i 发布库的名称进行下载操作。然后在main.js里面直接引入

import tools_ui from"@code_life/tools_ui"
Vue.use(tools_ui)

当然我们也可以按需加载

import tools_ui from"@code_life/tools_ui"
Vue.use(tools_ui.MuchSelect)
标签: npm 前端 node.js

本文转载自: https://blog.csdn.net/qq_44473483/article/details/134504001
版权归原作者 丹丹的小跟班 所有, 如有侵权,请联系我们删除。

“使用npm发布自己的组件库”的评论:

还没有评论