如何开发一个npm插件，并发布到npm官网

╰半橙微兮° 2022-04-11 11:30 320阅读 0赞

www.npmjs.com

创建一个vue-toast-demo目录

进入目录 cd vue-toast-demo

npm初始化  npm init

package name: (vue-toast-demo)  // 插件名  
version: (1.0.0)                // 插件版本  
description: a toast plugin for mobile // 插件的作用描述  
entry point: (index.js)         // 插件入口  
test command:                   // 测试脚本  
git repository:                 // 大家把插件做完以后,可以上传到自己的github仓库,最后把github的地址贴近来,这样别人在下载你的插件的时候,就可以直接驱读你源码了,可以先留空，等代码上传github仓库之后把地址再拷贝下来  
keywords: toast vue-toast 关键词  
author: JackBean 作者  
license: (ISC)

此时目录下就会有一个package.json文件。

在src下面建一个index.html文件，这个实际上是静态的，和我们的项目没有关系，我们只是演示一下

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .toast-container{
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                z-index: 2000;
                display: flex;
                justify-content: center; align-items: center; /* 这个两个属性在flex下可以使元素水平方向和垂直方向都剧中 */
            }
            .toast{
                width: 180px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                background-color:rgba(0,0,0,0.61);
                border-radius: 10px;
                color: white;
            }
        </style>
    </head>
    <body>
    <section class="toast-container">
        <div class="toast">
            <span>hello,Toast</span>
        </div>
    </section>
    </body>
    </html>

在src下再建一个lib文件夹,建一个vue-toast.vue放进去

<template>
        <section class="toast-container">
            <div class="toast">
                <span>{
       {message}}</span>
            </div>
        </section>
    </template>
    <style lang='scss'>
        .toast-container{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 2000;
            display: flex;
            justify-content: center; align-items: center; /* 这个两个属性在flex下可以使元素水平方向和垂直方向都剧中 */
            .toast{
            width: 180px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color:rgba(0,0,0,0.61);
            border-radius: 10px;
            color: white;
            }
        }
    
    </style>
    <script>
    export default {
        data () {
            return {
                message: 'hello Toast'
            }
        }
    }
    </script>

我们分析一下这个.vue文件,我们webpack需要使用vue-loader来对这个文件进行解析,

其次scss还需要scss-loader进行解析

再其次里面有es6的语法,因此还需要babel-loader来解析

这是静态部分，最后我们要实现怎么去读这个vue文件.最后把它呈现出来

接下来我们需要建一个入口,在package.json里面,

就是main 就是别人在加载你的插件的时候希望先加载哪一个js脚本

{
      "name": "vue-toast-demo",
      "version": "1.0.0",
      "description": "a toast plugin for mobile",
      "main": "index.js", //就是别人在加载你的插件的时候希望先加载哪一个js脚本 [使用者此处不可有注释]
    这个入口就是别人在调用你这个插件的时候会调用你这个index.js
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [
        "toast",
        "vue-toast"
      ],
      "author": "JackBean",
      "license": "ISC"
    }

webpack有一个入口文件，最后进行打包输出,

接着我们在lib目录下建一个入口文件叫做index.js

我们如何通过这个入口文件在打包的时候去编译我们的.vue文件

// 1.首先需要导入这个vue文件
    import ToastCompinet from './vue-toast.vue'
    
    // 2.定义一个Toast对象
    let Toast = {};
    
    // 3.给这个Toast添加一个静态的类 vue插件有一个原则必须要定义一个install方法 只有通过install方法才能被 vue.use()所引用
    Toast.install = function (VUe,option) {
    
        // 默认配置
        var opt = {
            duration:3000
    
        }
    
        // 如果用户传了参数就去循环覆盖这个参数
        for(var key in options){
            opt[key] = options[key];
        }
    
        //5.通过Vue.prototype原型绑定一个函数 读取vue文件并进行解析
            // 说白了就是在Vue的原型上面驱拓展一个函数
        Vue.prototype.$toast = function (message,option) {
    
            if(typeof option == 'object'){
                for(var key in option){
                    opt[key] = options[key];
                }
            }
    
            // 通过Vue.extend去继承这个组件 然后得到一个实例
            const ToastController = Vue.extend(ToastCompinet);
    
            // new出来的对象就是vue文件最终导出来的对象 并挂在到一个div里面去
               // 返回一个新的实例
            var instance = new ToastController().$mount(document.createElement('div')); 
    
            // 拿到这个实例之后，我们就可以控制这个实例的显示 比如给它赋值 但是赋的值一般是通过函数传进来的
            instance.message = message;
            instance.visible = true;
    
            setTimeout(()=>{
                instance.visible = false;
                document.body.removeChild(instance.$el);
            },opt.duration)
        }
        Vue.prototype.$toast['show']=function(message,option){
            Vue.prototype.$toast(message,option);
        }
        Vue.prototype.$toast['success']=function(message,option){
            Vue.prototype.$toast(message,option);
        }
        Vue.prototype.$toast['info']=function(message,option){
            Vue.prototype.$toast(message,option);
        }
        Vue.prototype.$toast['error']=function(message,option){
            Vue.prototype.$toast(message,option);
        }
    }
    
    // 4.通过export default进行输出 要不然 vue.use() 是找不到的
    export default Toast;

接下来编写webpack配置来解析.vue文件以及.js文件

先在vue-toast-demo下建一个webpack.confog.js文件，这是webpack官方默认的文件，也可以不叫这个名字,如果不叫这个名字在打包的时候就需要去指定他的配置,所以做好默认叫webpack.config.js,这样就不用去指定他的配置文件了

安装webpack

npm i webpack@4.1.0  --save

安装loader和插件

npm i save vue-loader babel-preset-env babel-core

npm i --save vue-template-compiler

cnpm i sass-loader node-sass css-loader --save

demo地址 [https://download.csdn.net/download/xyphf/10838084][https_download.csdn.net_download_xyphf_10838084]

\->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->

发布到npm官网

1、注册一个www.npmjs.com 网的账号