2020-9-8 seo達(dá)人
構(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ù)名稱(chēng)。
--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ù)依賴(lài)于其他庫(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)鍵字,以空格分離希望用戶(hù)最終搜索的詞。
author:作者
files: 要上傳的文件
private:是否私有,需要修改為 false 才能發(fā)布到 npm
license: 開(kāi)源協(xié)議
dependencies: 依賴(lài)庫(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í)行登錄命令,輸入用戶(hù)名、密碼、郵箱即可登錄
npm login
接著發(fā)布庫(kù)資源到npm
npm publish
最后發(fā)布成功可到官網(wǎng)查看對(duì)應(yīng)的包并下載
npm install package_name
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com