如何封装组件库并发布到npm上

学学学无止境
373 阅读3分钟

3.jpg 持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情 文章如果有不足的地方，还望各位大佬见谅啊~ 也可以在文章底下留言，一起学习~

前期准备

你需要到npm官网上去注册一个新的账号，这是你可以将组件发布到npm上的首要条件，官网链接

创建项目

为了方便，我们使用vue-cli创建项目，当然，你也可以不用vue-cli，但是项目的一些环境是需要你自己去配置的，所以接下来介绍的是使用vue-cli创建的方式：

vue create hzz-ui-test1

新建package目录

创建好项目之后，在src目录下新创建一个package目录，用于存放你自定义的组件文件，比如我这里创建了两个文件夹，且在文件夹创建好相应的vue文件，如下：

image.png

定义组件相关的逻辑

由于这篇文章主要是讲怎么将组件推送到npm上，因此这里组件的逻辑我只做简单的定义，由于要的小伙伴可以自己自定义自己的组件哈~，hzz-button/index.vue的内容

<template>
 <div>
    <button @click="clickBtn" class="btn">我是测试按钮</button>
  </div>
</template>

<script>
export default {
  name:"hzz-button",
  methods: {
    clickBtn(){
      console.log('点击了按钮')
    }
  },
}
</script>

<style scoped>
.btn {
  width: 100px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: pink;
  color: #fff;
}
</style>

在APP.vue文件中试用刚才定义的组件

<template>
  <div id="app">
    <img src="./assets/logo.png" alt="">
    <hzz-button></hzz-button>
  </div>
</template>
<script>
import HzzButton from './package/hzz-button/index.vue'
export default {
  components:{
    HzzButton
  }
}
</script>
<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>

得到的效果如下：

image.png

全局引用

在经过测试，刚才定义的组件是可以用的情况下，接下来我们需要在package目录下新建index.jsz文件，然后使用vue.component进行组件注册，便于我们在使用npm intall下载包之后，使用Vue.use()进行引用

在package下新建index.js文件

然后在package/index.js下，输入如下代码：

import HzzButton from '../package/hzz-button/index.vue' // 引入封装好的组件
const coms = [HzzButton]; //将来如果还有其他组件，都可以写在这个数组里

//批量组件注册
const install = function(Vue) {
    coms.forEach((com) => {
        Vue.component(com.name, com)
    })
}
export default install; //这个方法以后再使用的时候可以被use调用

打包文件

在package.json文件中定义打包命令，npm run package，这里是针对性打包，即只针对package文件夹下的js进行打包 注意：

  • --target lib 关键字 指定打包的目录
  • --name 打包后的文件名字
  • --dest 打包后的文件夹的名称
"package": "vue-cli-service build --target lib ./src/package/index.js --name hzz-ui --dest hzz-ui"

image.png

执行打包命令

执行打包命令，对刚才定义的组件操作进行打包

npm run package

执行打包命令后，可以看到打包出来的文件：

image.png

根据打包的文件将其发布到npm上

首先，先使用cd命令进入hzz-ui目录下

cd ..

然后在hzz-ui目录下初始化package.json文件

npm init -y

在hzz-ui/package.json文件中，这里主要说明一下name属性，这里的name属性定义的是你publish到npm上的对应的名字，比如我这里定义的是：hzz-ui-test2，那么后面发布到npm上的包名就是hzz-ui-test2，如果你npm publish的时候发现重名而报错时，那么你就可以去修改这里的name。

{
    "name": "hzz-ui-test2",
    "version": "1.0.0",
    "description": "",
    "main": "hzz-ui.common.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

绑定本地npm账号

如果你没有在本地调用过npm，那么你可以使用npm adduser来对账号进行绑定

image.png

发布到npm

注意是在刚才打的包的目录下，也就是hzz-ui/

npm publish

image.png 可以回到npm官网，并登陆你的账号，可以看到已经成功发布到上面了

image.png

下载与引入刚发布的npm包

安装

npm install hzz-ui-test2

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

import HzzUi from "pig-ui-test";
import "../node_modules/hzz-ui-test2/hzz-ui.css";
Vue.use(HzzUi);

这里单独引用了css，就和element-ui一样需要单独引入样式文件。

修改App.vue文件，直接使用组件hzz-button，代码如下：

image.png

image.png 到这里就结束啦，第一个组件成功发布到npm上啦，撒花~

avatar
文章
阅读
粉丝