發佈npm包以及注意事項（vue）

發佈npm包-vue組件

最近公司來了一些實習生，恰好又要準備技術分享了，這期就分享一下關於如何發佈npm包，以及要注意的一些事項。公司的前端主要用的有vue框架，那這邊就以vue爲基礎發佈包。

1. 初始化項目環境

使用 @vue/cli-init 這個工具建立一個簡易的vue項目環境，利於組件的開發。

vue init webpack-simple red-font // red-font是項目名
複製代碼

固然，除了這種方式以外，也還有其餘方法建立開發環境，npm init 也行（若是你不嫌麻煩的話）。

其實發包思想就是用webpack將你想要打包的東西打包成js，而後執行 npm publish 命令，啪！完事了，好了，文章提早結束了。

2. 建立組件

我隨便建立的一個組件

// RedFont.vue
<template>
  <div class="red-font"> <slot></slot> </div>
</template>
<script> export default { name:'RedFont' } </script>
<style lang="css" scoped> .red-font{ color: red; } </style>
複製代碼

這個組件就是咱們此次要發佈的 npm 包（red-font），能夠先將它引入到 App.vue 中看看效果。具體操做我相信大家已經和乾飯同樣熟練了吧 (- 、-)。

到這裏咱們的組件已經開發完了，咱們的目的就是將這個 RedFont.vue 文件打包，發佈。

3. 發佈前夕準備工做

咱們使用webpack打包須要準備一個入口文件

• 在 src 文件下新建 index.js

• 在 index.js 中引入咱們的組件並導出

// index.js

import RedFont from './RedFont.vue'
// 這句可加可不加
// 記住這裏，後面要考
// 能夠對組件進行全局註冊
RedFont.install = Vue => Vue.component(RedFont.name, RedFont); 

export default RedFont
複製代碼

• 修改 webpack.config.js 配置

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/index.js', // 修改打包的入口文件
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'redfont.js', // 打包後的文件名
    library:'red-font', // 咱們引入的時候用的名字 
    libraryTarget: 'umd', // 打包模式 umd支持cjs,amd規範，容許模塊能兼容多環境運行
    umdNamedDefine: true // 爲amd模塊命名
  },
  ...
}
複製代碼

• 打包 npm run build

• 修改 package.json

// package.json

"name": "red-font",
"description": "紅色字體組件", 
"version": "1.0.0", // 版本號
"author": "lucas",
"license": "MIT", // 協議
"keywords": ["red-font"], // 用戶搜索關鍵字
"private": false, // 爲true發佈會報錯
"main": "dist/redfont.js", // 包的入口文件
...
複製代碼

代碼是隨便拷的一段，湊湊文章篇幅，須要注意的我都已經寫了註釋。

• 新建 .npmignore 文件

npm忽略上傳目錄的配置文件

// .npmignore 

/src
/node_modules
webpack.config.js
複製代碼

• 編輯 README.md 文件

這個做爲npm包詳情頁的介紹...

4. 註冊 npm 的帳號（不在分享範疇！）

5. 發佈

發佈前要確保你目前的 npm 源是官方源而不是淘寶源。

npm config get registry  // 查看npm源

// 若是不是 切換到官方源
npm config set registry=http://registry.npmjs.org // 切換npm源
複製代碼

先登陸 npm

npm login
複製代碼

輸入帳號，密碼（輸入密碼的時候是看不見的，手別抖，完過後自信回車就好），郵箱。

npm whoami // 查看 npm 登陸人
複製代碼

發佈

npm publish
複製代碼

這樣子表示發佈成功了。

6. 檢驗

• 找個測試項目安裝 red-font

yarn add red-font 

// or
npm install red-font 
複製代碼

引入

<template>
  <div id="app"> <red-font>Bingo~</red-font> </div>
</template>
<script> import RedFont from 'red-font'; export default { name: 'app', components:{ RedFont } } </script>

import RedFront from 'red-font' // 說明：這個red-font就是咱們上面配置的 library


or

// 進行全局註冊
import RedFont from 'red-font';
Vue.use(RedFont)

複製代碼

---

成功啦，文章結束了，散了吧。

7. 最後一點

• 更新包

更新包和發佈包同樣，每次有調整，從新發布便可。

npm publish
複製代碼

注意 可是每次更新後必定要修改版本號，也就是 version 配置。不然會提示報錯You cannot publish over the previously published versions: 版本號。

• 撤銷包

npm unpublish red-font --force
複製代碼

沒啦，一滴都沒啦，困了～！

若是有什麼問題，歡迎你們留言指正，謝謝～