1奄容、npm是什么？
? ?npm 是Node 的模塊管理器产徊，功能極其強(qiáng)大昂勒。 它是Node 獲得成功的重要原因之一。 正因?yàn)橛辛薾pm舟铜，我們只要一行命令戈盈，就能安裝別人寫(xiě)好的模塊。
? ? 下面來(lái)介紹如何快速開(kāi)發(fā)一個(gè)vue插件并發(fā)布到npm上
2、項(xiàng)目初始化
首先安裝好腳手架vue-cli,打開(kāi)終端輸入命令
$ npm install --global vue-cli #全局安裝
這里封裝vue的插件用webpack-simple很合適塘娶，webpack-simple類似于webpack归斤。
接著在終端進(jìn)入需要?jiǎng)?chuàng)建項(xiàng)目的目錄下，輸入命令
$ vue init webpack-simple project-name #project-name為項(xiàng)目名刁岸，在這我的項(xiàng)目名為vue-mytoast
如圖：
image.png
其中
"Pproject name":項(xiàng)目名稱
“Project description”: 對(duì)項(xiàng)目的描述
"Author": 作者
"LIcense":開(kāi)源協(xié)議
"Use sass脏里？"：是否使用sass，這里我們沒(méi)用到虹曙，選擇否（No）
按照提示輸入命令
$ cd vue-mytoast #進(jìn)入文件夾
$ npm install #按照依賴包
$ npm run dev #啟動(dòng)項(xiàng)目
最終的項(xiàng)目結(jié)構(gòu)：
image.png
我們?cè)?src目錄下創(chuàng)建一個(gè)lib文件夾膝宁，里面存放需要開(kāi)發(fā)的插件文件，如圖
image.png
3根吁、所有環(huán)境搭建好后员淫，進(jìn)入插件開(kāi)發(fā)
在lib文件夾下創(chuàng)建一個(gè)toast.vue文件，代碼如下
<template>
<div class="vue-toast-wraper" v-show="isShowToast">
{{toastMsg}}
</div>
</template>
<script>
export default {
name: "vueToast",
data() {
return {
toastMsg: "登陸成功",
isShowToast:true
}
},
mounted() {
if (this.isShowToast) {
setTimeout(() => {
this.isShowToast = false;
},2500);
}
}
}
</script>
<style scoped>
.vue-toast-wraper{
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 17px;
padding: 10px;
border-radius:12px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
position: fixed;
top: 50%;
left: 50%;
z-index: 2000;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
創(chuàng)建一個(gè)toast.js文件寫(xiě)install方法击敌，代碼如下
import Toast from './toast.vue'
const vueToast = {
install(Vue, options) {
Vue.component(Toast.name, Toast) //Toast.name 組件的name屬性,也就是后面使用的組件名字
// 類似通過(guò) this.$xxx方式調(diào)用插件介返，其實(shí)只是掛載到原型上而已
//Vue.prototype.$xxx //最終可以在任何地方通過(guò) this.$XXX調(diào)用
}
}
//global情況下自動(dòng)安裝
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(vueToast)
}
export default vueToast
寫(xiě)好后整個(gè)項(xiàng)目基本開(kāi)發(fā)完成了，下面先在本項(xiàng)目測(cè)試一下
在 main.js 文件中全局引入toast.js
image.png
然后在App.vue中使用
image.png
如果在瀏覽器出現(xiàn)我們開(kāi)發(fā)的組件沃斤，則開(kāi)發(fā)成功圣蝎！
image.png
4、開(kāi)發(fā)完成后進(jìn)行文件配置
- 修改package.json文件
{
"name": "vue-mytoast",
"description": "vue彈窗提示插件",
"version": "1.0.0",
"author": "lwz",
"license": "MIT", //開(kāi)源協(xié)議
"private": false, //（改） 因?yàn)榻M件包是公用的衡瓶，所以private為false
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"main": "dist/toast.js", //（改） 配置main結(jié)點(diǎn)徘公，如果不配置，我們?cè)谄渌?xiàng)目中就不用import XX from '包名'來(lái)引用了哮针，只能以包名作為起點(diǎn)來(lái)指定相對(duì)的路徑
"dependencies": {
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"keywords": [ //（改） 指定關(guān)鍵字
"vue",
"toast"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
- 修改webpack.config.js文件
由于不是所有使用組件的人都是通過(guò) npm 安裝使用 import 引入組件的关面，還有很多人是通過(guò) <script>標(biāo)簽的方式直接引入的，所以我們要將 libraryTarget 改為 umd 格式十厢，同時(shí)我們要配置文件入口和出口
var path = require('path')
var webpack = require('webpack')
// 執(zhí)行環(huán)境
const NODE_ENV = process.env.NODE_ENV
module.exports = {
// entry: './src/main.js',
// 根據(jù)不同的執(zhí)行環(huán)境配置不同的入口
entry: NODE_ENV == 'development' ? './src/main.js' : './src/lib/toast.js',
output: {
//修改打包出口等太，在最外級(jí)目錄打包出一個(gè) index.js 文件，我們 import 默認(rèn)會(huì)指向這個(gè)文件
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js'
filename: "toast.js", //指定最終打包成dist文件夾下的文件名
library: "vueToast", // 指定的就是你使用require時(shí)的模塊名
libraryTarget: "umd", //libraryTarget會(huì)生成不同umd的代碼,可以只是commonjs標(biāo)準(zhǔn)的蛮放，也可以是指amd標(biāo)準(zhǔn)的缩抡，也可以只是通過(guò)script標(biāo)簽引入的
umdNamedDefine: true //會(huì)對(duì) UMD 的構(gòu)建過(guò)程中的 AMD 模塊進(jìn)行命名。否則就使用匿名的 define
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
- 修改.gitignore 文件
因?yàn)橐胐ist文件夾包颁，所以在.gitignore文件中把dist/去掉瞻想。
.DS_Store
node_modules/
# dist/
npm-debug.log
yarn-error.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
- 修改index.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-mytoast</title>
</head>
<body>
<div id="app"></div>
<!--<script src="/dist/build.js"></script>-->
<script src="/dist/toast.js"></script>
</body>
</html>
5、配置完畢娩嚼，進(jìn)入發(fā)布階段
在發(fā)正式包之前可以在本地先打一個(gè)包蘑险，然后測(cè)試下有沒(méi)有問(wèn)題，如果沒(méi)問(wèn)題再發(fā)布到npm上待锈。
首先漠其，打包到本地
$ npm run build
$ npm pack
npm pack 之后，就會(huì)在當(dāng)前目錄下生成 一個(gè)tgz 的文件竿音。
打開(kāi)一個(gè)新的vue項(xiàng)目和屎，在當(dāng)前路徑下執(zhí)行(‘路徑’ 表示文件所在的位置)
npm install 路徑/組件名稱.tgz
如圖我在project的項(xiàng)目中引入vue-mytoast組件
image.png
然后，在新項(xiàng)目的入口文件（main.js）中引入
import vueToast from 'toast'
Vue.use(vueToast)
在組件中使用
<div>
<vue-toast></vue-toast>
</div>
image.png
測(cè)試沒(méi)問(wèn)題春瞬，可以發(fā)布啦柴信！
首先在npm官網(wǎng)上注冊(cè)一個(gè)npm賬號(hào)
然后在發(fā)布項(xiàng)目的根目錄下輸入命令
$ npm adduser
輸入npm賬號(hào)，輸入用戶名宽气、密碼随常、郵箱
image.png
? ?在這里特別說(shuō)明一點(diǎn)，在npm注冊(cè)的賬號(hào)一定要把鏡像切換到http://registry.npmjs.org/.中來(lái)萄涯，如果你使用的是淘寶鏡像或者別的鏡像請(qǐng)切換到此鏡像绪氛，否則會(huì)報(bào)錯(cuò)
命令：
$ npm config set registry https://registry.npmjs.org/
登陸成功后進(jìn)行 npm publish發(fā)布
$ npm publish
如果報(bào)下面這個(gè)錯(cuò)，則在郵箱中核實(shí)一下發(fā)來(lái)的郵件即可
發(fā)布成功后到自己npm上可以看到剛才發(fā)的npm包
image.png
發(fā)布成功后涝影，當(dāng)別人想使用你的插件時(shí)就可以用 npm install 組件名稱 來(lái)安裝了枣察！
6、后記
折騰了很久燃逻，終于把自己的第一個(gè)插件的雛形發(fā)布出去了序目，這是一個(gè)很簡(jiǎn)單的插件，以后會(huì)繼續(xù)維護(hù)它伯襟，添加更多的實(shí)用功能猿涨。
- 更新npm包：
$ npm version <update_type>;
$ npm publish
使用命令：npm version <update_type>進(jìn)行修改，update_type 有三個(gè)參數(shù)姆怪，第一個(gè)是patch, 第二個(gè)是minor,第三個(gè)是 major叛赚，
patch：這個(gè)是補(bǔ)丁的意思，補(bǔ)丁最合適稽揭；
minor：這個(gè)是小修小改红伦；
major：這個(gè)是大改咯；
具體咋用：
比如我想來(lái)個(gè)1.0.1版本淀衣，注意昙读，是最后一位修改了增1，那么命令：npm version patch 回車就可以了膨桥；
比如我想來(lái)個(gè)1.1.0版本蛮浑，注意，是第二位修改了增1只嚣，那么命令： npm version minor 回車就可以了沮稚；
比如我想來(lái)個(gè)2.0.0版本，注意册舞，是第一位修改了增1蕴掏，那么命令： npm version major 回車就可以了；
- npm unpublish --force：移除一個(gè)發(fā)布包（也可以移除指定版本的包）
- npm logout：登出用戶
