从0-1开发vue插件并发布npm包

前端一拳
625 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

前言

很多小伙伴知道都如何在项目中封装一个组件使用，如果有多个项目使用到同一个组件怎么办，手动拷贝难以保证代码的统一，也不方便维护，此时就需要我们进行把开发的插件放到发布到npm上，进行安装使用。

先讲下vue插件是什么

插件一般用来给我们的项目添加一些全局功能，使用的范围没有限制

  1. 添加全局方法或属性，如vue-custom-element
  2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch
  3. 通过全局 mixin 方法添加一些组件选项，如: vue-router
  4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
  5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router

vue插件开发的几种方法

注意，我们的插件需要有个install方法，下面使用到的Vue来自这个方法的第一个参数Myplugin.install = (Vue, options) => { // ...我们的各种方法 }

  1. 全局方法Vue.globalFn = () => ()（直接调用即可，一般是无副作用的）
  2. 指令Vue.directive('directive-name', {// ...})（v-[指令名]使用）
  3. 注入组件Vue.mixin({})（我们可以把写的mixin内容，注入到我们的项目或页面中）
  4. 通过Vue.prototype.$fn = () => ()添加实例方法（注意与1区分）

这些形式都可以作为我们的插件开发，我们在这里举一个组件开发的例子。

使用模板创建

  1. vue init webpack-simple vue-test-1125
  2. cd vue-test-1125
  3. npm install
  4. 新建src/lib/index.js (组件入口)
import VueTest1125 from './VueTest1125.vue'
VueTest1125.install = Vue => Vue.component(VueTest1125.name, VueTest1125)
export default VueTest1125
  1. 新建src/VueTest1125.vue文件(文本展示组件)
<template>
  <div>
    {{text}}
  </div>
</template>
<script>
export default {
  name: 'VueTest1125',
  props: {
    text: {
      type: String,
      default: ''
    }
  }
}
</script>
  1. 此时我们可以在本地main.js和app.vue中，引入及使用组件，看一下效果
// main.js
import VueTest1125 from './lib/index'
Vue.component(VueTest1125.name, VueTest1125)

<!--app.vue-->
<VueTest1125 text="aaa"/>
  1. webpack打包配置修改
// 修改入口文件，我们通过环境变量来判断打包的入口文件，方便开发
entry: process.env.NODE_ENV === 'development' ? './src/main.js' : './src/lib/index.js'
// library是使用时候require组件的的模块名
library: 'VueTest1125',
// libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的，具体参数可以参考webpack
libraryTarget: 'umd',
// 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
umdNamedDefine: true
  1. npm run build 开始打包
  2. package.json更改
// 发布开源因此需要将这个字段改为 false
"private": false
// 这个指 import vue-test-1125的时候它会去检索的路径
"main": "dist/build.js"

npm发布

(如果使用nrm 记得切换源为npm)

  1. npm adduser/login（登陆我们的npm账号，记得先去www.npmjs.com注册）
  2. npm publish(登陆后可以直接发布)
  3. 发布成功后，可以在'https://www.npmjs.com/package/+项目名称'中查看了

项目使用

  1. npm i vue-test-1125 （安装）
  2. main.js中使用组件（使用）
// main.js
import VueTest1125 from 'vue-test-1125'
Vue.component(VueTest1125.name, VueTest1125)

<VueTest1125 text="hhhh"/>

怎么样，就是这么简单，这样我们的一个插件就开发并且发布好拉。

注意事项与细节

  1. 修改 .gitignore 去掉忽略dist,因为我们打包的文件也需要提交
  2. 每次上到npm上需要更改版本号，package.json 里的 version 字段
  3. package.json中keywords增加npm标签，便于其他人检索
"keywords": [
    "js",
    "vue"
],
  1. 如果需要更新代码，需要重新build 且更改package.json中版本号进行 publish，这里可以推荐写一个脚本去执行
avatar
文章
阅读
粉丝