手把手教你釋出一個vue元件到npm上

水痕001發表於2019-03-01
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映象的操作

相關文章