阅读 882

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

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

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

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

一、依赖环境

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

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

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

    vue init webpack-simple maucash(项目名)
    复制代码
  • 2、项目的基本结构

    npm包文件结构

  • 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镜像的操作

关注下面的标签,发现更多相似文章
评论