发布一个自己的npm包

        npm（Node Package Manager）是一种用于管理和共享Node.js模块的包管理工具。它是随同Node.js一起安装的默认包管理器。它简化了Node.js项目中的依赖管理、包安装和版本控制。通过npm，开发者可以轻松地使用和共享各种Node.js模块。既然npm如此好用,如何在NPM上发布自己的第一个包呢,。本文主要讲解如何在vue2项目中创建一个Button组件,并发布到npm上,希望对你有所帮助。

1.创建项目

使用Vue-CLI3的命令创建一个名为study-package-publish的项目，项目名称可以自定义。

vue create study-package-publish

创建好项目后,将src目录改名为preview,然后重新创建一个src文件夹,在src文件夹下新建index.js和components文件夹,在components文件夹下创建button.vue文件。

现在目录结构是这样的

 

 因为我们修改了src文件夹的名字，所以我们需要修改webpack打包的入口文件。在vue.config.js中添加如下代码

chainWebpack:options => {
    options.when(process.env.NODE_ENV==='development', config=>{
        config.entry('app').clear().add('./preview/main.js')
    })
},
css: { extract:false },    // 强制内联css

 此时项目可以正常运行

2.编写组件代码

button.vue

<template>
    <button :class="[
        `btn`, `btn-${type}`,
        {
            [`btn-${shape}`]: shape,
            [`btn-ghost`]: ghost,
            [`btn-long`]: long,
            [`btn-${size}`]: size
        }
    ]" :type="htmlType" :disabled="disabled" @click="handClick">
        <slot></slot>
    </button>
</template>

<script>
export default {
    props: {
        type: {
            validator (value) {
                return ['default', 'primary', 'dashed', 'text', 'info', 'success', 'warning', 'error'].includes(value);
            },
        },
        htmlType: {
            validator (value) {
                return ['button', 'submit', 'reset'].includes(value);
            },
        },
        shape: {
            validator (value) {
                return ['circle'].includes(value);
            },
        },
        size: {
            validator (value) {
                return ['default', 'small', 'large'].includes(value);
            },
        },
        disabled: Boolean,
        ghost: Boolean,
        long: Boolean,
    },
    methods: {
        handClick(e) {
            this.disabled || this.$emit("click", e);
        }
    }
}
</script>

<style scoped lang='scss'>
.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    color: #515a6e;
    background-color: #fff;
    border: 1px solid #dcdee2;
    height: 32px;
    padding: 0 15px;
    border-radius: 4px;
    color: #515a6e;
    cursor: pointer;
    transition: color .2s linear, background-color .2s linear, border .2s linear, box-shadow .2s linear, -webkit-box-shadow .2s linear;

    &-circle {
        border-radius: 32px !important;
    }

    &-long {
        width: 100%;
    }

    &-small {
        height: 24px;
        padding: 0 7px;
        font-size: 14px;
        border-radius: 3px;
    }

    &-large {
        height: 40px;
        padding: 0 15px;
        font-size: 16px;
        border-radius: 4px;
    }


    &-default {
        background-color: #fff;

        &:hover {
            color: #57a3f3;
            border-color: #57a3f3;
        }

        &.btn-ghost {
            border-color: #fff;
            background-color: transparent;
            color: #fff;

            &:hover {
                color: #57a3f3;
                border-color: #57a3f3;
            }
        }
    }

    &-primary {
        background-color: #2d8cf0;
        border-color: #2d8cf0;
        color: #fff;

        &:hover {
            background-color: #57a3f3;
            border-color: #57a3f3;
        }

        &.btn-ghost {
            background-color: transparent;
            color: #2d8cf0;

            &:hover {
                background: rgba(245, 249, 254, .5);
            }
        }
    }

    &-dashed {
        border-style: dashed;
        background-color: #fff;

        &:hover {
            color: #57a3f3;
            border-color: #57a3f3;
        }

        &.btn-ghost {
            border-color: #fff;
            background-color: transparent;
            color: #fff;

            &:hover {
                color: #57a3f3;
                border-color: #57a3f3;
            }
        }
    }

    &-text {
        border: 0;
        background-color: #fff;

        &:hover {
            color: #57a3f3;
        }

        &.btn-ghost {
            border-color: #fff;
            background-color: transparent;
            color: #fff;

            &:hover {
                color: #57a3f3;
                border-color: #57a3f3;
            }
        }
    }

    &-info {
        background-color: #2db7f5;
        border-color: #2db7f5;
        color: #fff;

        &:hover {
            background-color: #57c5f7;
            border-color: #57c5f7;
        }

        &.btn-ghost {
            background-color: transparent;
            color: #2db7f5;

            &:hover {
                background: rgba(245, 251, 254, .5);
            }
        }
    }

    &-success {
        background-color: #19be6b;
        border-color: #19be6b;
        color: #fff;

        &:hover {
            background-color: #47cb89;
            border-color: #47cb89;
        }

        &.btn-ghost {
            background-color: transparent;
            color: #19be6b;

            &:hover {
                background: rgba(244, 252, 248, .5);
            }
        }
    }

    &-warning {
        background-color: #f90;
        border-color: #f90;
        color: #fff;

        &:hover {
            background-color: #ffad33;
            border-color: #ffad33;
        }

        &.btn-ghost {
            background-color: transparent;
            color: #f90;

            &:hover {
                background: rgba(255, 250, 242, .5);
                color: #ffad33;
            }
        }
    }

    &-error {
        background-color: #ed4014;
        border-color: #ed4014;
        color: #fff;

        &:hover {
            background-color: #f16643;
            border-color: #f16643;
        }

        &.btn-ghost {
            background-color: transparent;
            color: #ed4014;

            &:hover {
                color: #f16643;
                background: rgba(254, 245, 243, .5);
            }
        }
    }

    &[disabled],
    &.btn-ghost[disabled] {
        color: rgba(0, 0, 0, .25);
        border-color: #dcdee2;
        background-color: transparent;
        cursor: not-allowed;
    }
}</style>

因为在代码中使用到了sass, 所以需要安装sass和sass-loader

因为sass和sass-loader是我们写代码时用到的包, 别人使用我们发布的包时并不会用到,所以在安装时加上-D添加到devDependencies中

npm i sass sass-loader -D

index.js

import Button from "./components/button.vue";

const components = { Button }
const install = Vue => {
    for(let item in components) {
        Vue.component(item, components[item]);
    }
}

export default { install };

3.配置发布文件

3.1在package.json的script命令中新增一条编译组件库的命令

"lib": "vue-cli-service build --target lib --name study-package-publish --dest lib src/index.js"

这个命令中可以修改的地方只有这三个

study-package-publish: 编译完成后生成的文件的名字

lib: 编译完成后生成文件夹的名字

src/index.js: 编译的入口文件 

3.2 执行编译命令——npm run lib。

编译成功后，会得到一个lib文件夹，如下图。

3.3 配置package.json

"name": "study-package-publish", // 包名称

"version": "1.0.0", // 包版本号

"description": "" // ,包描述

"main": "lib/study-package-publish.umd.min.js", // 包的入口文件，指向最终编译后的包文件

"private": false, // 是否私有，需要修改为 false 才能发布到 npm

3.4 添加 .npmignore 文件

我们发布到 npm 中，有些文件是不需要被发布的。所以我们需要添加 .npmignore 文件，设置忽略目录和文件。

# 忽略目录
preview/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

4.发布到NPM

首先需要到 npm （https://www.npmjs.com）上注册一个账号。

登陆之前需要将镜像源切换回原镜像

npm config set registry https://registry.npmjs.org

然后在终端执行登录命令，输入用户名、密码、邮箱即可登录。

npm login

登录成功后，输入命令，发布组件。

发布时确保你的包名,也就是package.json中的name与其他包名不同 

npm publish

此时自己的npm包就发布成功了

5. 使用

发布成功后，我们就可以在别的项目中下载并使用我们创建的npm包了。

npm i study-package-publish

然后在src/main.js中引入组件库。

import myPackage from "study-package-publish"
Vue.use(myPackage)

最后在vue文件中直接使用Button组件，运行项目。

以上就是本文的全部内容了，快去自己尝试一下吧。如果你有什么疑问或者建议，欢迎你随时留言，互相讨论。