npm发布vue组件包

前言

   现在前端开发基本离不开npm插件包，有的时候自己写了一个组件在多个项目中都有用到，简单粗暴的做法就是CV大法啦。不过这种不系统，不易维护的做法我们是不在这里讨论的。这里我以实际开发项目做的一个vue组件来陈述。

开发环境

   vue-cli3.x+ （2.x的也差不多）

首先创建项目这个一张图描述了

创建项目

更改项目结构

   其实呢改不改都无所谓的，只不过改了看上去更牛逼些。我们把src目录改成example模块，在根目录下新增一个packages目录。新增一个vue.config.js文件、新增一个.npmignore文件

目录结构

packages 目录说明

   这里是存放我们要发布的组件，可能你要发布多个组件这里以组件名区分开，不过个人不建议把多个npm组件弄在一起，除非你是想做大工具库API，我个人推荐一个项目一个组件当然这个组件是独立的

packages结构

// package/vue-aliplay-player/index.js    // 抛出 vue-aliplay-player
import vueAliplayer from './src/player.vue'

 /**
  * 预览做全局组件使用，按需加载组件可以不需要这个install
  */
vueAliplayer.install = function(vue) { 
    Vue.component(vueAliplayer.name, vueAliplayer)
}
export default vueAliplayer

// packages/index.js  // 抛出所有组件，做多个组件使用 
import vueAliplayer from './vue-aliplay-player'

const components = [
    vueAliplayer
]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue) {
    // 判断是否安装
    if (install.installed) return
    // 遍历注册全局组件
    components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    install,
    // 以下是具体的组件列表
    ...components
}

打包前开发测试

   按需加载

按需加载

   全局：main.js

全局注册

重点 打包

   根目录下的package.json scripts 新增一个命令

"lib": "vue-cli-service build --target lib --name vue-aliplay-player --dest lib packages/vue-aliplay-player/index.js"

新增命令

打包后的效果查看

npm run lib

   会在根目录下多个lib文件

lib文件里面的内容

打包后测试调用

   按需加载

按需加载
   全局：main.js
全局注册

发布前调整

1、更改根目录的package.json 信息

package信息调整

2、.npmignore 过滤发布文件

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html
 
# local env files
.env.local
.env.*.local
 
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
 
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

发布

注意： npm 源 一定要是 https://registry.npmjs.org/
查看源： npm config get registry
更改源： npm set registry https://registry.npmjs.org/

1、 npm login 
2、 npm publish

总结 【多实践多学习】

1、npm发布vue组件包不难，甚至都可不基于vue构建项目（项目构建只是为了方便调试、构建、管理）， 只需如下结构

不是有vue项目构建

2、网上发布vue npm包的贴很多，但是大都是CV【真是坑爹】，或者是较老的用法还有就是没有讲到核心；
3、前端入门很快，进阶很难，别以为看了两篇教程就自以为功夫满级可以肉抗了。