轻轻松松开发一个VUE插件并发布到npm

一直想了解如何发布一个npm包,然后也很想学习怎么开发一个vue插件,但是一直没有动手去做,最近对自己有点失望,💪卯足了劲终于动手做了一个还比较满意的插件。

在开发这个插件的时候,项目搭建是自己从头开始写的,所以记录了一下,可以参考从零搭建一个vue项目

初始化项目

创建文件夹并初始化:

mkdir vue-fun-loading && cd vue-fun-loading
npm init

编写插件逻辑

安装vue及相关插件:

npm i -D vue vue-loader css-loader

创建插件的核心逻辑文件夹lib,以及写插件逻辑的文件:

mkdir lib && cd lib
touch Loading.vue

这里用一个loading的组件作为示例来说明,核心代码如下👇:

<!--/lib/Loading.vue-->
<template>
    <div :class="`fun-loading-circle-half fun-loading-circle-half-${size}`"></div>
</template>
<script>
    export default {
        name: 'FunLoadingCircleHalf',
        props: {
            size: {
                type: String,
                default: 'middle',
                elem: ['small', 'middle', 'large']
            }
        }
    }
</script>
<style>
    .fun-loading-circle-half {
        border-radius: 50%;
        border-color: #ff69b4 #ff69b4 transparent transparent;
        border-style: solid;
        animation: load_half_rorate .6s infinite;
    }

    .fun-loading-circle-half-small {
        width: 14px;
        height: 14px;
        border-width: 3px;
    }
    .fun-loading-circle-half-middle {
        width: 28px;
        height: 28px;
        border-width: 4px;
    }
    .fun-loading-circle-half-large {
        width: 40px;
        height: 40px;
        border-width: 5px;
    }

    @keyframes load_half_rorate {
        100% {
            transform: rotate(360deg);
        }
    }
</style>

上面的代码比较简单,用css实现了一个半圆旋转的loading效果。

然后lib文件夹下创建一个index.js文件,在这个文件中,通过访问window.vue使用Vue.component方法注册封装的Loading👇:

// /lib/index.js
import Loading from './Loading';

const install = function (Vue, opts = {}) {
    if (install.installed) return;

    Vue.component(Loading.name, Loading);
};

if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}

export default install;

到这里插件的核心逻辑就完成了,接下来的打包配置方面。

webpack配置

安装webpack,创建webpack.config.js:

npm i -D webpack webpack-cli cross-env
touch webpack.config.js

通过配置webpack,对项目进行打包,配置如下👇:

const path = require('path');

const config = {
    mode: 'production',
    entry: './lib/index.js',
    output: {
        filename: 'vue-fun-loading.js',
        path: path.resolve(__dirname, './dist/'),
        library: 'VueFunLoading',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                loader: 'css-loader'
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    externals: {
        'vue': 'vue'
    },
    devtool: '#eval-source-map'
};


module.exports = config;

其中loader的配置就不多说了,对于发布一个npm包最核心的配置就是output中的配置,这里说明一下:

  • libary:库的名称,取决于output.libraryTarget 选项的值
  • libaryTarget:配置如何暴露libary,值可以是:var(暴露为一个变量)、umd(暴露为所有的模块定义下都可运行的方式)、amd(暴露为 AMD 模块)、commonjs2(入口起点的返回值将分配给 module.exports 对象)或者通过在对象上赋值暴露等
  • umdNamedDefine:会对 UMD 的构建过程中的 AMD 模块进行命名,否则使用匿名的define

关于更多的webpack创建libary的信息可以查看:创建 library

然后在package.json中配置脚本:

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

运行npm run build可以看到生成了dist文件以及vue-fun-loading.js,表示打包运行成功✌️。

npm发布与配置

首先在package.json中添加配置:

// 公开
"private": false,
// 指定了加载的入口文件。默认值是模块根目录下面的index.js
"main": "dist/vue-fun-loading.js",
// 数组,内容是模块下文件名或者文件夹名,如果是文件夹名,则文件夹下所有的文件也会被包含进来
"files": [
    "dist",
    "lib"
],
"keywords": [
    "loading",
    "vue"
],
// 如果有git项目,则可以配置git项目的地址
"repository": {
    "type": "git",
    "url": "https://github.com/OwnGhy/vue-fun-loading.git"
},

到这里所有的配置都完成了,只剩下发布npm包了✌️。

发布npm包首先需要注册一个npm 账号,注册之后登录:

npm login

如果很久没有登录想要查看当前登录,使用:

npm who am i

登录之后就可以发布包了:

npm publish

需要注意的是,每次发布包基本更新package.json中的版本号。

本地调试

  • npm install 相对路径直接安装相对路径进行调试,缺点是修改之后需要反复重新安装
  • 使用npm link将模块link到全局,然后在需要使用的项目中npm link xxx就可以了,调试完成之后再npm unlink xxx即可

    调试参考:你所不知道的模块调试技巧 - npm link

最后

最后的最后,推销一下,我开发了一个各种各样loading效果的插件,感兴趣的小伙伴可以参考一下: vue-fun-loading

嘿嘿嘿,开心😊🎉。

推荐阅读更多精彩内容