1、npm是什麼？
npm 是Node 的模塊管理器，功能極其強大。 它是Node 獲得成功的重要原因之一。 正因爲有了npm，我們只要一行命令，就能安裝別人寫好的模塊。
下面來介紹如何快速開發一個vue插件併發布到npm上
2、項目初始化
首先安裝好腳手架vue-cli,打開終端輸入命令
$ npm install --global vue-cli #全局安裝
這裏封裝vue的插件用webpack-simple很合適，webpack-simple類似於webpack。
接着在終端進入需要創建項目的目錄下，輸入命令
$ vue init webpack-simple project-name #project-name爲項目名，在這我的項目名爲vue-mytoast
如圖：
其中
"Pproject name":項目名稱
“Project description”: 對項目的描述
"Author": 作者
"LIcense":開源協議
"Use sass？"：是否使用sass，這裏我們沒用到，選擇否（No）
按照提示輸入命令
$ cd vue-mytoast #進入文件夾
$ npm install #按照依賴包
$ npm run dev #啓動項目
最終的項目結構：
我們在 src目錄下創建一個lib文件夾，裏面存放需要開發的插件文件，如圖
3、所有環境搭建好後，進入插件開發
在lib文件夾下創建一個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>
創建一個toast.js文件寫install方法，代碼如下
import Toast from './toast.vue'
const vueToast = {
install(Vue, options) {
Vue.component(Toast.name, Toast) //Toast.name 組件的name屬性,也就是後面使用的組件名字
// 類似通過 this.$xxx方式調用插件，其實只是掛載到原型上而已
//Vue.prototype.$xxx //最終可以在任何地方通過 this.$XXX調用
}
}
//global情況下自動安裝
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(vueToast)
}
export default vueToast
寫好後整個項目基本開發完成了，下面先在本項目測試一下
在 main.js 文件中全局引入toast.js
然後在App.vue中使用
如果在瀏覽器出現我們開發的組件，則開發成功！
4、開發完成後進行文件配置
- 修改package.json文件
{
"name": "vue-mytoast",
"description": "vue彈窗提示插件",
"version": "1.0.0",
"author": "lwz",
"license": "MIT", //開源協議
"private": false, //（改） 因爲組件包是公用的，所以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結點，如果不配置，我們在其他項目中就不用import XX from '包名'來引用了，只能以包名作爲起點來指定相對的路徑
"dependencies": {
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"keywords": [ //（改） 指定關鍵字
"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文件
由於不是所有使用組件的人都是通過 npm 安裝使用 import 引入組件的，還有很多人是通過 <script>標籤的方式直接引入的，所以我們要將 libraryTarget 改爲 umd 格式，同時我們要配置文件入口和出口
var path = require('path')
var webpack = require('webpack')
// 執行環境
const NODE_ENV = process.env.NODE_ENV
module.exports = {
// entry: './src/main.js',
// 根據不同的執行環境配置不同的入口
entry: NODE_ENV == 'development' ? './src/main.js' : './src/lib/toast.js',
output: {
//修改打包出口，在最外級目錄打包出一個 index.js 文件，我們 import 默認會指向這個文件
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js'
filename: "toast.js", //指定最終打包成dist文件夾下的文件名
library: "vueToast", // 指定的就是你使用require時的模塊名
libraryTarget: "umd", //libraryTarget會生成不同umd的代碼,可以只是commonjs標準的，也可以是指amd標準的，也可以只是通過script標籤引入的
umdNamedDefine: true //會對 UMD 的構建過程中的 AMD 模塊進行命名。否則就使用匿名的 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 文件
因爲要用dist文件夾，所以在.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、配置完畢，進入發佈階段
在發正式包之前可以在本地先打一個包，然後測試下有沒有問題，如果沒問題再發布到npm上。
首先，打包到本地
$ npm run build
$ npm pack
npm pack 之後，就會在當前目錄下生成 一個tgz 的文件。
打開一個新的vue項目，在當前路徑下執行(‘路徑’ 表示文件所在的位置)
npm install 路徑/組件名稱.tgz
如圖我在project的項目中引入vue-mytoast組件
然後，在新項目的入口文件（main.js）中引入
import vueToast from 'toast'
Vue.use(vueToast)
在組件中使用
<div>
<vue-toast></vue-toast>
</div>
測試沒問題，可以發佈啦！
首先在npm官網上註冊一個npm賬號
然後在發佈項目的根目錄下輸入命令
$ npm adduser
輸入npm賬號，輸入用戶名、密碼、郵箱
在這裏特別說明一點，在npm註冊的賬號一定要把鏡像切換到http://registry.npmjs.org/.中來，如果你使用的是淘寶鏡像或者別的鏡像請切換到此鏡像，否則會報錯
命令：
$ npm config set registry https://registry.npmjs.org/
登陸成功後進行 npm publish發佈
$ npm publish
如果報下面這個錯，則在郵箱中核實一下發來的郵件即可
發佈成功後到自己npm上可以看到剛纔發的npm包
發佈成功後，當別人想使用你的插件時就可以用 npm install 組件名稱 來安裝了！
6、後記
折騰了很久，終於把自己的第一個插件的雛形發佈出去了，這是一個很簡單的插件，以後會繼續維護它，添加更多的實用功能。
- 更新npm包：
$ npm version <update_type>;
$ npm publish
使用命令：npm version <update_type>進行修改，update_type 有三個參數，第一個是patch, 第二個是minor,第三個是 major，
patch：這個是補丁的意思，補丁最合適；
minor：這個是小修小改；
major：這個是大改咯；
具體咋用：
比如我想來個1.0.1版本，注意，是最後一位修改了增1，那麼命令：npm version patch 回車就可以了；
比如我想來個1.1.0版本，注意，是第二位修改了增1，那麼命令： npm version minor 回車就可以了；
比如我想來個2.0.0版本，注意，是第一位修改了增1，那麼命令： npm version major 回車就可以了；
- npm unpublish --force：移除一個發佈包（也可以移除指定版本的包）
- npm logout：登出用戶
作者：lwz4070
鏈接：快速開發一個vue插件併發布到npm上