写vue项目好几个了,经常在npm上找一些插件用,回想起来,npm上怎么没有我的插件呢?
一定是我没上传!!于是乎,有了下文,实现一个vue插件的开发,并发布到npm上。
1.首先安装下vue-cli脚手架,最开始我其实是想自己本地webpack搭建一个vue插件开发的环境的,后来又想着,webpack和很多loader兼容性不是特别好,尤其是webpack5以后,
所以,咱就直接用脚手架去init一个简单的插件模板吧~~
yarn global add @vue/cli || npm i @vue/cli -g
上面命令挑一个即可。
2. 基于vue init命令生成一个简单的带webpack配置的vue模板
vue init webpack-simple vue-toast
如果提示
Command vue init requires a global addon to be installed.
Please run npm i -g @vue/cli-init and try again.
就先执行一下:
npm i -g @vue/cli-init || yarn global add @vue/cli-init
再执行
vue init webpack-simple vue-toast
这样一个基本的vue项目就有了,但是里面又不会有太多不需要的东西。
3.在项目src下面新建plugin文件夹,plugin文件夹下新建toast文件夹,toast文件夹下新建toast.vue、toast.js,
toast代码如下:
<template> <div class="vue-toast-wraper" v-show="localShow"> {{msg}} </div> </template> <script> export default { name:'toast', props:{ msg:{ default:"", type:String }, isShow:{ default:false, type:Boolean } }, data (){ return { localShow: this.isShow } }, mounted(){ if(this.isShow){ setTimeout(() => { this.localShow = false },2500); } } } </script> <style scoped> .vue-toast-wraper{ background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 30px; 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代码如下:
import VueToastPlugin from './toast.vue' const toastPlugin = { install: function(Vue) { Vue.component(VueToastPlugin.name, VueToastPlugin) } } // global 情况下 自动安装 if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(toastPlugin) } // 导出模块 export default toastPlugin
4.这里因为vue init生成的模板给你配置好了.vue、.css、es6的语法了,所以我们啥都不用做了,只需要修改webpack.config.js如下(注释注意的是我们需要修改的点):
var path = require('path') var webpack = require('webpack') var NODE_ENV = process.env.NODE_ENV var plugin_name = 'toast' module.exports = { entry: NODE_ENV == 'production' ? `./dist/${plugin_name}.js` : './src/main.js', // 注意:这里需要区分环境,dev我们用来测试组件,生产用来对组件打包,此处不改会导致,打包是这个vue的项目代码,而不是我们的插件代码 output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: `${plugin_name}.js`, library: 'vue-toast', // 指定的就是你使用require时的模块名 libraryTarget: 'umd',// 指定输出格式 // 注意:这里需要配置导出包支持的格式,配上umd才能支持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 }) ]) }
此时yarn build一下,就可以看到dist文件夹有toast.js文件,就是插件的代码了~~,由于我们webpack的配置,该代码也是支持umd引入的。
5.最后我们修改下package.json里面部分配置,如下图:
忘记说了
这个一定要设置成false,其实不设置,最后你也发布不上去,npm会提醒你的
6.最后就是用es6和umd引入,试试效果了,web目录下新建一个index.html,使用http-server启一个服务
http-server,没有这个模块的自己安装下哈
yarn global add http-server
然后在web下面http-server,umd代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="./vue-toast/dist/toast.js"></script> </head> <body> <div id="app"> <toast :msg = "'this is a test'" :is-show = "isShow" ></toast> </div> <script> new Vue({ el: '#app', data: function() { return { isShow: true, } }, methods: { } }) </script> </body> </html>
附上效果图:
再试下es6引入的效果:
代码如下:
在app.vue引入进来
附上效果图:
可以看到umd的代码不在里面这是yarn dev启的服务,
最后就是发布了
7.先去官网注册一个账号https://www.npmjs.com/
然后到vue-toast根目录,先yarn build一下,生辰插件的压缩js,然后npm login,登录下你注册的账号,最后npm publish,就完成了,
发布期间可能会有报错,根据报错搜一下,就那么几个问题,处理掉就ok了,最后注意:发布其实,不需要vue-toast文件里的部分文件,比如/src、index.html模板文件、webpack.config.js等等,
插件只需要dist文件、package.json、readme.md几个就够了,所以不需要的文件全部添加到.gitignore文件里去就ok了,这样再发布,包就比较小了,其实还可以去除插件里的map文件,就不多做解释了,
毕竟我也是第一次,等后面有比较好的想法了,可以优化下,写点有意思的插件分享给大家~~
最后附上我的仓库地址:https://github.com/zzxiexin/vue-plugin-tpl
还木有评论哦,快来抢沙发吧~