手把手教你发布一个vue组件到npm上

最近公司项目比较多,不同的项目中公用的组件,如何避免因为一个需求的变动,造成所有项目都要拿过来修改,我们想到把公共的部分抽取出来做为一个组件,常见的组件模式有:

• 直接存放到项目中(需要在不同的项目中拷贝)
• 发布到npm上公用的模块,

本文章介绍登录组件如何从0开始创建一个vue组件发布到npm上本项目案例

一、依赖环境

• 1、node环境
• 2、vue-cli的脚手架

二、使用vue-cli构建一个项目及基本配置

• 1、创建一个基本的项目

  vue init webpack-simple maucash(项目名)
  

• 2、项目的基本结构

  

• 3、本项目是基于iview的基础上,需要根据官网的方式安装与配置iview连接地址

三、本地调试

• 1、在App.vue中直接引入本地的组件

  import maucashLogin from "./packages/maucash-login/maucash-login";
  

• 2、maucash-login组件和我们本地写一般的vue组件一样的,附加组件之间的通讯

四、本地组件测试没问题,改造成vue插件类型的

• 1、在组件的文件夹下创建一个index.js文件

  // 引入组件
  import MaucashLogin from './maucash-login'
  
  MaucashLogin.install = Vue => Vue.component(MaucashLogin.name, MaucashLogin);
  
  if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(MaucashLogin);
  }
  
  export default MaucashLogin
  

• 2、在与packages同级下创建一个index.js的文件(一个包下可能有多个组件)

  import Maucash from './packages/maucash-login/index.js';
  
  const components = [
    Maucash,
  ]
  
  const install = function(Vue, opts = {}) {
    components.map(component => {
      Vue.component(component.name, component);
    })
  }
  
  /* 支持使用标签的方式引入 */
  if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
  }
  
  export default {
    install,
    Maucash,
  }
  

五、修改配置文件

• 1、修改package.json文件

  {
    "name": "maucash",
    "description": "maucash中常用组件抽取",
    "version": "1.0.2",
    "author": "kuangshp <kuangshp@126.com>",
    // 开源协议
    "license": "MIT",
    // 因为组件包是公用的，所以private为false
    "private": false,
    // 配置main结点，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径
    "main": "dist/maucash.js",
    "scripts": {
      "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
      "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
    },
    "dependencies": {
      "axios": "^0.18.0",
      "iview": "^2.14.1",
      "style-loader": "^0.23.1",
      "url-loader": "^1.1.2",
      "vue": "^2.5.11"
    },
    // 指定代码所在的仓库地址
    "repository": {
      "type": "git",
      "url": "git+git@git.xxxx.com:maucash/maucash.git"
    },
    // 指定打包后,包中存在的文件夹
    "files": [
      "dist",
      "src"
    ],
    // 指定关键词
    "keywords": [
      "vue",
      "maucash",
      "code",
      "maucash code"
    ],
    // 项目官网的地址
    "homepage": "https://github.com/kuangshp/maucash",
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not ie <= 8"
    ],
    "devDependencies": {
      "babel-core": "^6.26.0",
      "babel-loader": "^7.1.2",
      "babel-plugin-transform-runtime": "^6.23.0",
      "babel-preset-env": "^1.6.0",
      "babel-preset-stage-3": "^6.24.1",
      "cross-env": "^5.0.5",
      "css-loader": "^0.28.7",
      "file-loader": "^1.1.4",
      "node-sass": "^4.5.3",
      "sass-loader": "^6.0.6",
      "vue-loader": "^13.0.5",
      "vue-template-compiler": "^2.4.4",
      "webpack": "^3.6.0",
      "webpack-dev-server": "^2.9.1"
    }
  }
  

• 2、修改.gitignore文件

  因为要用dist文件夹，所以在.gitignore文件中把dist/去掉。

• 3、修改webpack.config.js文件

  var path = require('path')
  var webpack = require('webpack')
  const NODE_ENV = process.env.NODE_ENV;
  
  module.exports = {
    entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',
    output: {
      path: path.resolve(__dirname, './dist'),
      publicPath: '/dist/',
      filename: 'maucash.js',
      library: 'maucash',
      libraryTarget: 'umd',
      umdNamedDefine: true
    },
    ...
  }  
  

六、本地测试自己的包文件

• 1、本地打包

  npm run build
  # 本地生成一个maucash-1.0.1.tgz的包
  npm pack
  

• 2、本地测试(在别的项目中)

  npm install 路径/maucash-1.0.1.tgz
  

• 3、在本地项目的main.js中

  import Maucash from 'maucash';
  Vue.use(Maucash);
  

• 4、在需要使用的地方

  <maucash-login :baseUrl="baseUrl" :headers="headers" @loginHandle="loginHandle"/>
  

• 5、本地测试没问题就可以发布到npm上

七、发布到npm上(注意镜像地址要指向npm的地址)

• 1、到npm上注册一个账号

• 2、登录

  npm login
  

• 3、添加用户信息

  npm adduser
  

• 4、发布到远程仓库(npm)上

  npm publish
  

• 5、删除远程仓库的包

  npx force-unpublish package-name '原因描述'
  

八、补充知识关于本地多个npm镜像的操作