手把手發佈一個npm包及相關注意事項

前言

這裏是發佈npm包的具體步驟，手把手教會，相關原理在其餘文章下面有
原理好文章指路
10分鐘教你快速開發一個vue插件併發布npm

手把手教你封裝一個 vue component

發佈以前，須要註冊一個npm帳號
https://www.npmjs.com/ 這裏註冊

具體步驟

1.新建項目

---

$ npm install -g vue-cli
$ vue init webpack-simple my-project
$ cd my-project
$ npm install
$ npm run dev

如需安裝less
$ npm install less less-loader --save-dev

2.代碼

---

src 下面新建一個components文件夾。裏面放各類組件文件夾。
例如新建input文件夾 裏面有index.js 和Input.vue文件

// input.js
import Input from './Input.vue'
export default Input

// Input.vue
export default {
  name: 'ui-input', // 這是註冊組件的名字。也是要使用這個npm包的標籤名字
  props: {
  },
  data () {
    return {
    }
  },
  mounted () {
  },
}

// main.js
import uiInput from './components/input'
const jovoUI = {
  uiInput,
  uixxx  // 其他vue組件
}
if (typeof window !== 'undefined' && window.Vue) { 
  window.Vue.use(jovoUI)
}
jovoUI.install = function (Vue, options) {
  Vue.component(uiInput.name, uiInput)
}
export default jovoUI
// 跑項目的時候測試用,在本地測試的時候，就把組件註冊在本地，app.vue裏面引用組件調試
// Vue.component('ui-input', uiInput)
// new Vue({
//   el: '#app',
//   render: h => h(App)
// })

須要在本地測試的時候,解開上面的註釋，在app.vue或者其餘vue文件裏測試

// app.vue
<div id="app">
  <ui-input></ui-input>
</div>

3.發佈準備

---

1. .gitignore文件 刪掉dist忽略
2.
// webpack.config.js
以前是
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  }
改成
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    // filename: 'build.js' 這是原來的
    filename: 'jovoui.js', // 打包後js的名字，本身取,本地調試時，新加的這些東西都要註釋掉，解開filename: 'build.js註釋
    library: 'jovoui',  // 使用require引用時的名字
    libraryTarget: 'umd', // 指定你的模塊輸出類型，能夠是commonjs,AMD,script形式,UMD模式
    umdNamedDefine: true
  }
3. // package.json文件 
// 文件第一行的 name 是包的名字，不能和已有的npm包重名，不然npm publish時會提示你是否登陸，其實你已經登錄了 例如"name": "jovocom",
private改成false
"main": "dist/jovoui.js" 這條是新增的，是打包文件入口，以前是build.js,參考第二條取得打包名字

4. // index.html 
// 本地調試時，須要把第一行解開,以及main.js的註釋解開
<!-- <script src="/dist/build.js"></script> -->註釋
<script src="/dist/jovoui.js"></script>

4.注意事項

---

1.每次發佈以前，要在package.json改版本號

2.npm run build, // 會在生成一個dist文件，裏面有jovoui.js和jovoui.map

3.npm publish，// 如有錯執行第5條，判斷是否登陸，未登陸執行第四條

4.npm login your account your password your@email.com

5.npm whoami // 判斷是否登陸

6.每次發佈完npm包再本地調試npm時，須要解開如下注釋
(1)index.html 改成 <script src="/dist/build.js"></script> // 本地調試時
(2)webpack.config.js 裏面的註釋切換成build那個 新增的註釋掉
(3)main.js 本地註冊的部分解開註釋
(4)npm run build 打包一次

7.更新記一次坑，有一次不知道怎麼的切換了淘寶源，npm login一直登不上，報錯conflict什麼的。要切換到npm官方倉庫上，這個時候npm login就能登上了。最後發佈npm是發佈到官方npm上，不是cnpm,因此要是隻能有npm才能下載
$ npm install -g nrm
$ nrm use taobao
$ nrm use npm // 用這句使用npm

8.npm publish出錯，說包的名字跟已有的包太類似了，叫換一個，而後換了一個，就成功publish了，因此取名字仍是要獨特一點，符合這個組件特性一點

使用

npm發佈成功使用。$ npm install xx // 這是發佈的包的名字，就是package.json裏面的name每次包更新以後再次安裝能夠 $ npm install xx@latest// main.jsimport xx from '包名'Vue.use(xx)// 某個vue文件<ui-input></ui-input> // 這是當初註冊組件的名字