任何人都能发布一个npm库(从0搭建公司组件库系列)

前言

 最近再给app的同事分享h5的框架，他们对我司搭建的组件库很是感兴趣，让我从0开始给他们分享一下相关方案；借此我想循序渐进从0开始出个系列；

 咱们来基于Vue框架开发插件吧，组件封装可是个家常便饭的操作！一个封装得漂亮的组件，不仅能在项目中自如地使用，还能从npm仓库里下载别人精心包装好的组件库，像iview、element-ui这些大牌。当然，每家公司的业务场景都有点儿不同，咱们得自己动手封装私家定制的组件。要是换到另外一个项目，可不能把组件代码照搬过去（一通ctrl c + v），那太麻烦了。其实咱们可以把组件上传到npm仓库，需要用的时候，就直接安装上再使用。

本教程适合从未发布过远程组件库的朋友；也适合只停留在想搭建公司组件库的同学；本篇只在了解整个发布流程，如何注册，导入导出以及按需引入，了解一下基础发布引用流程

为什么要封装组件库？

这么做有两个超赞的好处：

第一：有公司内部的远程组件库

第二：便于业务快速落地，任何项目都能轻松衔接

第三：积累经验还能凑热闹！把组件搞成开源的，小伙伴们纷纷贡献经验，咱们一起进步呐！

既然是小白也能懂，那咱们就从如何创建vue项目开始，本篇整个过程分为以下步骤：

1、起步：创建vue项目

2、分析目录结构：src目录下创建package，里面放置各个组件，如demo-button/demo-button.vue

3、组件封装《像往常写个子组件一样些vue文件就可以了》

4、使用Vue插件模式

5、配置打包指令

6、执行打包命令

7、初始化打包后项目的package.json

8、发布打包好的项目库到npm

9、查看远程的库

10、如何在其他项目里使用

1. 起步（创建vue项目）

  拿vue举例说明，我们需要创建一个单独的vue项目,初始化Vue项目非常简单！按照以下步骤进行操作：

1. 首先，确保你已经安装了Node.js。你可以在命令行中运行 node -v 来检查是否已正确安装。
2. 打开终端或命令行，并进入你想要创建Vue项目的目录中。
3. 运行下面的命令来安装 Vue CLI（如果你已经安装了 Vue CLI，可跳过这一步）：

npm install -g @vue/cli

1. 安装完成后，运行以下命令来创建一个新的Vue项目：

vue create 项目名称

例如，如果你想要创建一个名为 "npm-demo 的项目，可以运行：

vue create npm-demo

1. 接下来，你需要选择一个预设配置。你可以选择默认配置，也可以手动选择不同的特性和插件。按照提示进行选择即可。 移动键盘方向键选择Default ([Vue 2] babel, eslint)
2. 完成上述步骤后，Vue CLI 会自动安装所需的依赖并创建一个新的Vue项目。
3. 进入项目目录：

cd npm-demo //刚刚创建的项目文件的根目录下

1. 最后，使用以下命令启动开发服务器：

npm run serve

此时，你的Vue项目已经成功初始化，并且开发服务器已经启动。你可以在浏览器中访问提供的地址查看项目运行情况。

这样，你就成功初始化了一个Vue项目，并可以开始开发啦！🥳🥳🥳

2. 分析目录结构

分析创建好的vue项目的根目录下有个src目录，在其下面新建package文件夹

为什么这样做：好处是，我们清晰地将所有组件集中管理，使得目录结构更加有条理。当需要找到某个组件时，我们可以直接进入对应的文件夹中查找，不会迷失在各种零散的文件中。

比如说，如果button组件src/package/button/src/这个组件文目录下。

3. 组件封装《像往常写个子组件一样些vue文件就可以了》

比如：我们需要开发两个UI组件，一个是button,一个是input《像往常写个子组件一样些vue文件就可以了》

目录结构可参考elementui的源码

button和input下面的mine.vue代码分别如下

<template>
  <button  click="handleClick">
   {{ text }}
  </button>
</template>
<script>
export default {
  name: 'demo-button', //其他项目导入后需要使用这个组件的时候名称
  props: {
    text: {
      type: String,
      default: '按钮',
    }
  },
  methods: {
    handleClick(evt) {
      this.$emit('click', evt);
    }
  }
};
</script>

<template>
  <input :type="type" v-model="inputValue" @input="handleInput">
</template>
<script>
export default {
  name: 'demo-input', //其他项目导入后需要使用这个组件的时候名称
  props: {
    type: {
      type: String,
      default: 'text',
      validator(value) {
        return ['text', 'time'].includes(value); // 只允许传入 'text', 'time'
      }
    },
  },
  data() { 
    return {
      inputValue: '',
    }
  },
  methods: {
     handleInput(event) {
      this.inputValue = event.target.value;
      this.$emit('input', event.target.value);
    }
  }
};
</script>

然后我们引用到App.vue组件里面验证一下，看是否组件可用，代码如下：（先清除创建项目app.vue里的无用代码）

<template>
  <div id="app">
    <demo-button :text="'我是个按钮'" />
    <demo-input :type="'time'" @input="inputHand" />
  </div>
</template>

<script>
import demoButton from './package/button/src/main.vue'
import demoInput from './package/input/src/main.vue'

export default {
  name: 'App',
  components: {
    demoButton,
    demoInput
  },
  methods: {
    inputHand(value) { 
      console.log(value)
    }
  }
}
</script>

最终效果显示如下：

4、使用Vue插件模式

经过第3步已经封装好了我的插件，分别为button和input，下面我们就要用到Vue提供的一个公开方法：install，当你在用到这个插件的项目使用Vue.use(plugin)时，该方法会被调用，从而实现将插件注册为全局，然后在全局任意组件都可使用

在package目录下新建index.js文件，代码如下：

//package/index.js
import Demobutton from "./button/src/main.vue"; // 引入封装好的组件
import Demoinput from "./input/src/main.vue"; // 引入封装好的组件
const componentList = [Demobutton, Demoinput]; // 将来如果有其它组件,都可以写到这个数组里

// 批量组件注册
const install = function (Vue) {
  componentList.forEach((com) => {
   /**
     * 上传代码主要的的一项工作就是将我们封装好的组件注册为全局组件，
     * 用到了Vue.component()方法，当使用Vue.use()时，
     * 我们的install方法便会执行
     */
    Vue.component(com.name, com);
  });
};

export default {
  install,
  Demobutton, //这里再次默认到处是为了支持按需加载
  Demoinput,
}; // 这个方法以后再使用的时候可以被use调用

5、修改打包指令

修改package.json文件，在script下面加入命令配置

"package": "vue-cli-service build --target lib ./src/package/index.js --name try-npm-demo-ui --dest try-npm-demo-ui"

命令注解：

• --target lib 关键字 指定打包的目录
• --name 打包后的文件名字
• --dest 打包后的文件夹的名称 `

6、然后执行打包命令：

npm run package

打包完成后，根目录新增了打包好的组件库的文件夹

7、初始化打包后项目的package.json

1)想要发布到npm仓库，我们还得在npm-demo-ui文件夹下初始化一个package.json文件。进入npm-demo-ui目录，执行命令：

npm init -y

生成的package.json文件里记录着这个插件的相关信息，其中name字段便是我们上传到npm仓库后的名称try-npm-demo-ui，其余就是版本，描述之类的 我们不做深入，感兴趣的可自行搜一下

8、发布到npm仓库

1）注册账号

首先，在www.npmjs.com/上注册一个账号。填写必…

2）设置npm源

有些同学本地的npm镜像源可能设定了采用的是淘宝镜像源或者其它的，如果想要发布npm包，我们得把我们本地的npm源切换为官方得源（npm config get registry查看本地的源路径），命令如下：

npm config set registry=https://registry.npmjs.org

3）添加npm用户

在npm-demo-ui目录，添加npm用户，执行命令：

npm adduser // 这里会让你填写用户名等等，如果之前设置过即可跳过此步。

4）发布npm

在npm-demo-ui目录下执行命令进行发布：

npm publish // 在发布前，请确保你的代码包符合npm的要求，并且已经为其配置了正确的package.json文件。

此刻我们就成功的发布好了我们的远程库了🥳🥳🥳

9、查看远程的库

去个人的账号下或者直接搜索查看自己的库了；

10、如何在其他项目里使用

找到自己想要引入这个插件的项目比如我们的cms项目，像安装其它插件一样执行插件安装

npm install try-npm-demo-ui

安装完成后看package.json里面对了一个咱们上面开发的远程插件

然后在main.js引用注册，代码如下：

import TryNpmDemo from 'try-npm-demo-ui'
Vue.use(TryNpmDemo)

找个页面来调用一下

预览效果如下

至此，我们就演示了完整的vue远程插件的封装和发布流程，上面的教程更像是从0到1的初尝试，主要分析了一下流程，这个基本流程是组件库构建的最最基础；本篇不涉及代码层面的分析，重在梳理这个流程；后面如果到封装自己的组件库还涉及到很多知识点，比如插件的设计模型，css的设计模式，比如像elementui采用了BEM模式去封装插件的样式，这个在后面我会抽时间带大家分析如何像elementui一样设计自己的组件库

衍生场景

上面的是发布到npm的场景，有的同学是自己公司内部使用的（比如我司），且不对外的，这个可以搭建公司的私服，只需要在第8步中的发布到npm仓库改成私服地址就行，其他操作一致；

---

以上关于封装npm远程组件库的理解，欢迎大家点赞收藏；如果有误，欢迎指正 🌹