如何发布一个Vue组件到Npm上?

前端时间做了一个基于Vue的拼图验证组件,因为公司需要,就想着做完之后放到Npm上,方便使用

发布流程如下：

1. 创建一个Npm账号并进行邮箱确认(很重要)

2. 创建一个文件夹,然后 npm init,然后根据你的vue装vue的解析插件,babel转换插件,代码压缩插件,css插件等等...

3. 配置你的package.json文件.

大家可以看一下我这边的一个真实例子.

我是先把我的组件代码进行压缩,转换等...这个可做可不做，但是建议做,我采用的是rollup来构建,

为什么是rollup?

因为rollup相比较于webpack来说,配置相对简单,容易上手,特别适合做组件或者组件库的构建工具.而且也不会有这么多的版本问题.

rollup.config.js

目录结构如下：

我在这里将 src/index.js做为入口文件,然后rollup会根据我们的入口文件去解析代码,最后产出解析后的文件如下：

可以看到 ROLLUP 将我们的文件整合到一起了,因为我这个插件是单独的,所以css样式我就采用了style标签的形式

这里就是style字符串值了,是postcss处理的.

然后继续说一下package.json文件

{
    "name": "puzzle-vue2",//插件的名字
    "version": "1.0.8",// 版本
    "main": "dist/Puzzle-vue2.js",// 入口文件
    "license": "MIT",//协议
    "author": "aursordev",//作者
    "private": false,//是否私有
    "keywords": [ // 关键字,npm 搜索用的
        "puzzle-vue",
        "拼图验证框",
        "vue2-puzzle"
    ],
    "scripts": {
        "build": "rollup -c"
    },
    "dependencies": {
        "vue": "^2.5.11"
    },
    "devDependencies": {
        "@babel/core": "^7.15.0",
        "@babel/preset-env": "^7.15.0",
        "@rollup/plugin-babel": "^5.3.0",
        "rollup": "^2.56.3",
        "rollup-plugin-commonjs": "^10.1.0",
        "rollup-plugin-node-resolve": "^5.2.0",
        "rollup-plugin-postcss": "^4.0.1",
        "rollup-plugin-uglify": "^6.0.4",
        "rollup-plugin-vue": "^5.0.1",
        "vue-template-compiler": "^2.6.14"
    }
}

等一系列处理好之后,就可以在文件夹根目录执行 npm publish

等处理完成后就可以去npm 上下载使用了,

使用方法如下：

最后：.npmignore 文件,就是类似.gitignore文件,贴一下配置：

完工!