製做併發布第一個vue組件的npm包

最近在網上找到一個 網頁製做輔助工具-jQuery標尺參考線插件 ,以爲在如今的一個項目中能用的上,插件是基於JQuery的,可是如今的項目是用vue寫的。So...,
就照葫蘆畫瓢改裝成了Vue組件,總的來講算是一個用處較多的組件,因而乎,就想着把它上傳到Npm上分享出來。
之前只用過別人的包,這一次本身上傳一個樂呵樂呵...順便記錄發佈一下過程。

項目地址

https://github.com/gorkys/vue...vue

初始化項目

這裏用的是webpack-simple,能夠理解爲精簡版的vue-cliwebpack

vue init webpack-simple vue-ruler-tool

安裝好後再就是一頓常規操做git

npm install
npm dev

項目結構
項目結構es6

原結構中紅框裏是放的vue的logo圖片,用不着的東西,因此這裏就把改爲了組件文件夾與組件文件

還須要在src下面新建一個index.js做爲入口文件,代碼:github

// src/index.js
export { default } from './components/vue-ruler-tool'

修改package.json

{
  "name": "vue-ruler-tool",
  "description": "vue標尺輔助線",
  "version": "1.0.0",
  "author": "gorkys",
  "license": "MIT",  // 開源協議
  // 採用commonJs入口文件,若是不配置,咱們在其餘項目中就不用import XX from XX來引用了,只能以包名做爲起點來指定相對的路徑
  "main": "dist/index.js", 
  "jsnext:main": "src/index.js", // 採用es6模塊化入口
  "private": false, // 由於組件包是公用的,因此private爲false
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
// 指定代碼所在的倉庫地址
  "repository": {
    "type": "git",
    "url": "https://github.com/mauricius/vue-draggable-resizable.git"
  },
// 提交bug的地址
  "bugs": {
    "url": "https://github.com/mauricius/vue-draggable-resizable/issues"
  },
  // 項目官網的url
  "homepage": "https://github.com/mauricius/vue-draggable-resizable",
  "keywords": [
    "vue",
    "component",
    "dragabble",
    "resizable"
  ], // 指定關鍵字
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
   ...
  }
}

修改.gitignore

由於要用dist文件夾,因此在.gitignore文件中把dist/去掉。

修改webpack.config.js

// 原
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  }
...
}
// 新
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'index.js',
    libraryTarget: 'umd',
    umdNamedDefine: true
  }
...
}

測試插件

npm run build
npm pack
npm pack 以後,就會在當前目錄下生成 一個vue-ruler-tool-1.0.0.tgz 的文件。
打開一個新的vue項目,將vue-ruler-tool-1.0.0.taz放到目錄中,在當前路徑下執行
npm install vue-ruler-tool-1.0.0.tgz
在新項目中引用組件就可使用了

報錯

在引用後報錯沒法解析,須要檢查webpack.config.js配置的輸出文件路徑是否與package.json同樣。web

發佈到npm

一、註冊

進入官網,註冊賬號vue-cli

二、登陸併發布
npm login
npm publish

登陸

提示報錯是由於註冊完後沒有進行郵箱驗證,驗證完成便可發佈成功

成功

參考文獻

如何製做併發佈一個vue的組件的npm包
發佈本身第一個npm 組件包(基於Vue的文字跑馬燈組件)npm

相關文章
相關標籤/搜索