構(gòu)建庫(kù)的常見(jiàn)方法有兩種：一種是自己手動(dòng)構(gòu)建webpack庫(kù)打包，設(shè)置output為 library; 另一種是基于vue-cli3輸出庫(kù)資源包。我們采用第二種vue腳手架的方式構(gòu)建庫(kù)。

新增編譯庫(kù)命令

// package.json

"scripts": {

   // ...

   "lib": "vue-cli-service build --target lib --name Step --dest dist packages/index.js"

}

// packages/index.js  默認(rèn)打包Step

import Step from '../steps/src/step';

Step.install = function(Vue) {

   Vue.component(Step.name, Step);

};

export default Step;

--name: 庫(kù)名稱。

--target: 構(gòu)建目標(biāo)，默認(rèn)為應(yīng)用模式。這里修改為 lib 啟用庫(kù)模式。

--dest: 輸出目錄，默認(rèn) dist。

[entry]: 最后一個(gè)參數(shù)為入口文件，默認(rèn)為 src/App.vue。

更多詳細(xì)配置查看 ? vue腳手架官網(wǎng)

如果該庫(kù)依賴于其他庫(kù)，請(qǐng)?jiān)趘ue.config.js 配置 externals

// vue.config.js

module.exports = {

   configureWebpack:{

     externals: {

        vue: 'Vue',

        'vue-router':'VueRouter',

        axios: 'axios'

     }

   }

}

執(zhí)行 npm run lib 就可以發(fā)現(xiàn)我們的庫(kù)被打包到了 根目錄的dist文件夾下。

添加 .npmignore 文件（可選）

和 .gitignore 的語(yǔ)法一樣，具體需要提交什么文件，看各自的實(shí)際情況

# 忽略目錄

examples/

packages/

public/

# 忽略指定文件

vue.config.js

babel.config.js

*.map

配置npm庫(kù)信息

配置package.json文件，以發(fā)布庫(kù)文件。

{

 "name": "gis",

 "version": "1.2.5",

 "description": "基于 Vue 的庫(kù)文件",

 "main": "dist/gis.umd.min.js",

 "keyword": "vue gis",

 "private": false,

  "files": ["dist"],

 "license": "MIT"

}

name: 包名，該名字是唯一的。可在 npm 官網(wǎng)搜索名字，如果存在則需換個(gè)名字。

version: 版本號(hào)，每次發(fā)布至 npm 需要修改版本號(hào)，不能和歷史版本號(hào)相同。

description: 描述。

main: 入口文件，該字段需指向我們最終編譯后的包文件。

keyword：關(guān)鍵字，以空格分離希望用戶最終搜索的詞。

author：作者

files: 要上傳的文件

private：是否私有，需要修改為 false 才能發(fā)布到 npm

license： 開(kāi)源協(xié)議

dependencies： 依賴庫(kù)

注意每次發(fā)布新的庫(kù)，需要更改版本號(hào)，規(guī)則如下：

"version": "1.2.5" 主版本號(hào)為 1，次版本號(hào) 2，修訂號(hào) 5

主版本號(hào)（Major）：當(dāng)你做了不兼容的API修改

次版本號(hào)（Minor）：當(dāng)你做了向下兼容的功能性新增

修訂號(hào)（Patch）：當(dāng)你做了向下兼容的問(wèn)題修正

登錄npm

首先設(shè)置登錄的npm鏡像地址

npm config set registry http://168.20.20.57.4873

然后在終端執(zhí)行登錄命令，輸入用戶名、密碼、郵箱即可登錄

npm login

接著發(fā)布庫(kù)資源到npm

npm publish

最后發(fā)布成功可到官網(wǎng)查看對(duì)應(yīng)的包并下載

npm install package_name

藍(lán)藍(lán)設(shè)計(jì)( www.wtxcl.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)