發佈一個npm包

前言

我這裏是寫了一個vue輪播圖插件，所以我使用了vue的腳手架工具建立一個項目，固然你也能夠選擇本身搭建腳手架。

本例中我會使用vue腳手架建立一個項目，併發布到npm上面去。

經過腳手架建立項目

全局安裝

首先，要建立項目，封裝vue的插件用webpack-simple很合適，所以你須要全局安裝@vue/cli-init插件：

yarn global add @vue/cli-init
//或者
npm install @vue/cli-init -g
複製代碼

使用vue init webpack-simple vue-test-plugin 初始化目錄； vue-test-plugin是項目名稱，也是新建項目的目錄。 而後我使用全局安裝失敗了，那麼我就使用局部安裝把。

局部安裝

新建D:/test test文件夾，局部安裝@vue/cli-init插件：

yarn add @vue/cli-init
//或者
npm install @vue/cli-init
複製代碼

安裝成功以後，使用命令初始化vue-test-plugin項目：

./node_modules/.bin/vue init webpack-simple vue-test-plugin
複製代碼

而後就一路enter直到項目建立完成。建立完成後的目錄以下：

插件開發

在./src/目錄下實現你本身的功能，個人功能實現完了以後以下：

./src/lib/banner.vue：是主功能文件

./src/lib/index.js：

import VueBanner from './banner.vue'
const plugin = {
  install: function(Vue) {
    Vue.component(VueBanner.name, VueBanner)
  }
}
// 這裏的判斷很重要
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(plugin)
}
export default plugin
複製代碼

咱們在webpack配置的入口文件就是index.js，install是掛載組件的方法，有了它咱們就能夠在外部use一個插件了。

若是外部使用<script>引入的話window存在，window.Vue.use(plugin)就直接將插件掛在在全局了。

修改文件配置

package.json 文件

{
  "name": "vue-test-plugin",
  "description": "vue的插件測試",
  "version": "1.0.1",
  "author": "姓名 <xxx@xxx.com>",
  // 配置main結點，若是不配置，咱們在其餘項目中就不用import XX from '包名'來引用了，只能以包名做爲起點來指定相對的路徑
  "main":"dist/vue-test-plugin.js",
  //開源協議
  "license": "MIT",
  // 由於組件包是公用的，因此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": "git+xxxxx"  //這裏寫github的git地址，格式爲：'git+' + gitHubURL
 },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
// 指定關鍵字
 "keywords": [
     "vue",
     "test-plugin"
 ],
  // 項目官網的url
 "homepage": "github地址下的readme.md文件地址",
  "devDependencies": {
    ...
  }
}

複製代碼

webpack.config.js 文件

// entry: './src/main.js',
  entry: './src/lib/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    // filename: 'build.js'
    filename: '/vue-test-plugin.js',
    library: 'VueTestPlugin',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
複製代碼

因爲不是全部使用組件的人都是經過 npm 安裝使用 import 引入組件的，還有不少人是經過 <script>標籤的方式直接引入的，因此咱們要將 libraryTarget 改成 umd 格式，同時咱們要配置文件入口和出。

.gitignore 文件

dist/  //刪除此行
複製代碼

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

index.html 文件

<!-- <script src="/dist/build.js"></script> -->
    <script src="/dist/vue-test-plugin.js"></script>
複製代碼

打包

yarn build 
//或者
npm run build
複製代碼

由於在import的時候，自動會加載packge.json文件中的main中的路徑，我這裏是：dist/vue-test-plugin.js，所以會去讀取這個文件，因此須要打包。

發佈npm

• 1.註冊npm官網帳號
• 2.切換到vue-test-plugin根目錄下，添加npm帳號：npm adduser
• 3.輸入本身的npm用戶名、密碼、郵箱。
• 4.上傳代碼：npm publish

發佈出現問題：npm ERR! publish Failed PUT 403

若是發佈過程當中出現此問題是由於使用了淘寶鏡像，須要切換成原來的鏡像，發佈成功後，再切回來。

檢查是否使用了淘寶鏡像

npm config get registry
複製代碼

出現以下結果：

registry.npm.taobao.org/

若是出現如上結果，繼續下一步

切換成原來的npm源

npm config set registry=http://registry.npmjs.org
複製代碼

繼續npm publish發佈npm包。

切回淘寶鏡像

npm config set registry=https://registry.npm.taobao.org/
複製代碼