使用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)
})

// 全局引入
const install = 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
})

export default exportData

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

简单说下上面的代码

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.组件名称)
   1
   2

5. 最后我们将所有数据直接导出。

三. 构建出发布的包

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

"npmUp": "vue-cli-service build --target lib ./src/components/index.js --name tools_ui --dest tools_ui"
1

• 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)
1
2

当然我们也可以按需加载

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