一直想了解如何發(fā)布一個npm包辽幌，然后也很想學(xué)習(xí)怎么開發(fā)一個vue插件耕捞，但是一直沒有動手去做缎脾，最近對自己有點失望鞋喇，??卯足了勁終于動手做了一個還比較滿意的插件记焊。
在開發(fā)這個插件的時候虏杰，項目搭建是自己從頭開始寫的腥刹，所以記錄了一下脑溢，可以參考從零搭建一個vue項目
初始化項目
創(chuàng)建文件夾并初始化：
mkdir vue-fun-loading && cd vue-fun-loading
npm init
編寫插件邏輯
安裝vue及相關(guān)插件：
npm i -D vue vue-loader css-loader
創(chuàng)建插件的核心邏輯文件夾lib喻奥，以及寫插件邏輯的文件：
mkdir lib && cd lib
touch Loading.vue
這里用一個loading的組件作為示例來說明席纽，核心代碼如下??：
<!--/lib/Loading.vue-->
<template>
<div :class="`fun-loading-circle-half fun-loading-circle-half-${size}`"></div>
</template>
<script>
export default {
name: 'FunLoadingCircleHalf',
props: {
size: {
type: String,
default: 'middle',
elem: ['small', 'middle', 'large']
}
}
}
</script>
<style>
.fun-loading-circle-half {
border-radius: 50%;
border-color: #ff69b4 #ff69b4 transparent transparent;
border-style: solid;
animation: load_half_rorate .6s infinite;
}
.fun-loading-circle-half-small {
width: 14px;
height: 14px;
border-width: 3px;
}
.fun-loading-circle-half-middle {
width: 28px;
height: 28px;
border-width: 4px;
}
.fun-loading-circle-half-large {
width: 40px;
height: 40px;
border-width: 5px;
}
@keyframes load_half_rorate {
100% {
transform: rotate(360deg);
}
}
</style>
上面的代碼比較簡單，用css實現(xiàn)了一個半圓旋轉(zhuǎn)的loading效果撞蚕。
然后lib文件夾下創(chuàng)建一個index.js文件润梯，在這個文件中，通過訪問window.vue使用Vue.component方法注冊封裝的Loading??：
// /lib/index.js
import Loading from './Loading';
const install = function (Vue, opts = {}) {
if (install.installed) return;
Vue.component(Loading.name, Loading);
};
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default install;
到這里插件的核心邏輯就完成了，接下來的打包配置方面纺铭。
webpack配置
安裝webpack寇钉，創(chuàng)建webpack.config.js：
npm i -D webpack webpack-cli cross-env
touch webpack.config.js
通過配置webpack，對項目進(jìn)行打包舶赔，配置如下??：
const path = require('path');
const config = {
mode: 'production',
entry: './lib/index.js',
output: {
filename: 'vue-fun-loading.js',
path: path.resolve(__dirname, './dist/'),
library: 'VueFunLoading',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
loader: 'css-loader'
}
]
},
resolve: {
extensions: ['*', '.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
externals: {
'vue': 'vue'
},
devtool: '#eval-source-map'
};
module.exports = config;
其中l(wèi)oader的配置就不多說了扫倡，對于發(fā)布一個npm包最核心的配置就是output中的配置，這里說明一下：
- libary：庫的名稱竟纳，取決于output.libraryTarget 選項的值
- libaryTarget：配置如何暴露libary撵溃，值可以是：var（暴露為一個變量）、umd（暴露為所有的模塊定義下都可運(yùn)行的方式）锥累、amd（暴露為 AMD 模塊）征懈、commonjs2（入口起點的返回值將分配給 module.exports 對象）或者通過在對象上賦值暴露等
- umdNamedDefine：會對 UMD 的構(gòu)建過程中的 AMD 模塊進(jìn)行命名，否則使用匿名的define
關(guān)于更多的webpack創(chuàng)建libary的信息可以查看：創(chuàng)建 library
然后在package.json中配置腳本：
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
運(yùn)行npm run build可以看到生成了dist文件以及vue-fun-loading.js揩悄，表示打包運(yùn)行成功??卖哎。
npm發(fā)布與配置
首先在package.json中添加配置：
// 公開
"private": false,
// 指定了加載的入口文件。默認(rèn)值是模塊根目錄下面的index.js
"main": "dist/vue-fun-loading.js",
// 數(shù)組删性，內(nèi)容是模塊下文件名或者文件夾名亏娜，如果是文件夾名，則文件夾下所有的文件也會被包含進(jìn)來
"files": [
"dist",
"lib"
],
"keywords": [
"loading",
"vue"
],
// 如果有g(shù)it項目蹬挺，則可以配置git項目的地址
"repository": {
"type": "git",
"url": "https://github.com/OwnGhy/vue-fun-loading.git"
},
到這里所有的配置都完成了维贺，只剩下發(fā)布npm包了??。
發(fā)布npm包首先需要注冊一個npm 賬號巴帮，注冊之后登錄：
npm login
如果很久沒有登錄想要查看當(dāng)前登錄溯泣，使用：
npm who am i
登錄之后就可以發(fā)布包了：
npm publish
需要注意的是，每次發(fā)布包基本更新package.json中的版本號榕茧。
本地調(diào)試
-
npm install 相對路徑直接安裝相對路徑進(jìn)行調(diào)試垃沦，缺點是修改之后需要反復(fù)重新安裝 - 使用
npm link將模塊link到全局，然后在需要使用的項目中npm link xxx就可以了用押，調(diào)試完成之后再npm unlink xxx即可
肢簿、
調(diào)試參考：你所不知道的模塊調(diào)試技巧 - npm link
最后
最后的最后，推銷一下蜻拨，我開發(fā)了一個各種各樣loading效果的插件池充，感興趣的小伙伴可以參考一下： vue-fun-loading。
嘿嘿嘿缎讼，開心????收夸。
