基於vue腳手架構建庫併發布到npm

構建庫的常見方法有兩種：一種是本身手動構建webpack庫打包，設置output爲 library; 另外一種是基於vue-cli3輸出庫資源包。咱們採用第二種vue腳手架的方式構建庫。

新增編譯庫命令

// package.json 
"scripts": {
    // ...
    "lib": "vue-cli-service build --target lib --name Step --dest dist packages/index.js"
}

// packages/index.js  默認打包Step
import Step from '../steps/src/step';
Step.install = function(Vue) {
    Vue.component(Step.name, Step);
};
export default Step;

• --name: 庫名稱。
• --target: 構建目標，默認爲應用模式。這裏修改成 lib 啓用庫模式。
• --dest: 輸出目錄，默認 dist。
• [entry]: 最後一個參數爲入口文件，默認爲 src/App.vue。

更多詳細配置查看 ☛ vue腳手架官網

若是該庫依賴於其餘庫，請在vue.config.js 配置 externals

// vue.config.js
module.exports = {
    configureWebpack:{
      externals: {
         vue: 'Vue',
         'vue-router':'VueRouter',
         axios: 'axios'
      }
    }
}

執行 npm run lib 就能夠發現咱們的庫被打包到了 根目錄的dist文件夾下。

添加 .npmignore 文件（可選）

和 .gitignore 的語法同樣，具體須要提交什麼文件，看各自的實際狀況

# 忽略目錄
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

配置npm庫信息

配置package.json文件，以發佈庫文件。

{
  "name": "gis",
  "version": "1.2.5",
  "description": "基於 Vue 的庫文件",
  "main": "dist/gis.umd.min.js",
  "keyword": "vue gis",
  "private": false,
   "files": ["dist"],
  "license": "MIT"
 }

• name: 包名，該名字是惟一的。可在 npm 官網搜索名字，若是存在則需換個名字。
• version: 版本號，每次發佈至 npm 須要修改版本號，不能和歷史版本號相同。
• description: 描述。
• main: 入口文件，該字段需指向咱們最終編譯後的包文件。
• keyword：關鍵字，以空格分離但願用戶最終搜索的詞。
• author：做者
• files: 要上傳的文件
• private：是否私有，須要修改成 false 才能發佈到 npm
• license： 開源協議
• dependencies： 依賴庫

注意每次發佈新的庫，須要更改版本號，規則以下：

"version": "1.2.5" 主版本號爲 1，次版本號 2，修訂號 5

• 主版本號（Major）：當你作了不兼容的API修改
• 次版本號（Minor）：當你作了向下兼容的功能性新增
• 修訂號（Patch）：當你作了向下兼容的問題修正

登陸npm

首先設置登陸的npm鏡像地址

npm config set registry http://168.20.20.57.4873

而後在終端執行登陸命令，輸入用戶名、密碼、郵箱便可登陸

npm login

接着發佈庫資源到npm

npm publish

最後發佈成功可到官網查看對應的包並下載

npm install package_name