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

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目录,存放源码

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

    
    
    



    

        hello,Toast
    

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

我们分析一下这个.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 [email protected]  --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

->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->->

发布到npm官网

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

2、先搜索一下要发布的插件名字有没有，如有则不能使用这个名字

3、在package.json中的version写上版本号

4、命令行添加用户,就是注册完了以后，要把刚刚注册的用户加进来

npm adduser

然后填写大家刚刚注册的用户名和密码和注册的Email地址，

查询一下当前用户是谁:

npm whoami

发布插件

npm publish 这样就已经发布上去了

当然发布的时候，要写一些文档

README.md 文件，告诉别人如何使用该插件

重新发布，每次发布都必须修改package.json里面的version版本号，否则无法发布