vue 插件开发

前端这点事 434 0

写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里面部分配置,如下图:

忘记说了 

  "private"false,

这个一定要设置成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

标签: Vue Vue插件开发

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~