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

最新推荐文章于 2024-06-06 13:30:10 发布

xyphf_和派孔明

最新推荐文章于 2024-06-06 13:30:10 发布

阅读量5.2k

点赞数 4

分类专栏： vue.js入门前端工具

本文链接：https://blog.csdn.net/xyphf/article/details/84846009

版权

vue.js入门同时被 2 个专栏收录

93 篇文章 6 订阅

订阅专栏

前端工具

18 篇文章 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

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

发布到npm官网

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

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

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

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

npm adduser

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

查询一下当前用户是谁:

npm whoami

发布插件

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

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

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

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

xyphf_和派孔明

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
如何开发一个npm插件，并发布到npm官网

www.npmjs.com创建一个vue-toast-demo目录进入目录 cd vue-toast-demonpm初始化 npm initpackage name: (vue-toast-demo) // 插件名version: (1.0.0) // 插件版本description: a toast plugin for mobile // ...
复制链接

扫一扫