1 前 言
平时我们在开发的时候经常使用 npm 安装各种组件。
今天我们就来尝试下制作一个自己的组件发布到 npm 上。
这里我以自己刚发布的一个 Vue 组件来介绍。感兴趣的可以来下载玩玩。
安 装
npm install -S k-progress
使 用
// main.js
import 'k-progress';
import 'k-progress/dist/k-progress.css';
2 开 发
2.1 新建项目
新建一个 Vue ，熟悉的可以直接略过哈。
这里我使用的是 @vue/cli。
npm install -g @vue/cli
# OR
yarn global add @vue/cli
执行该命令，可检查是否安装成功。
vue --version
我经常使用 vue ui 来新建项目，这个命令会生成一个可视化操作页面，特别方便。
我的项目用到了 scss，新建的时候勾选上。
至此项目新建完成。
2.2 开发功能
默认新建的项目有个 HelloWorld.vue 的例子，我们可以在这个页面，引用我们的组件来检测开发效果。
在 src/components 中，我们新建一个 progress.vue，该文件名称随意。
具体的插件功能在此页面编写。
在同级目录下新建一个 index.scss 文件用来保存插件使用的样式文件。
在同级目录下新建一个 index.js 文件来注册 Vue 组件。
这里以我为例。
import Vue from 'vue';
import kProgress from './progress.vue';
import './index.scss';
const Components = {
kProgress
};
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name]);
});
export default Components;
同时我们可以在 HelloWorld.vue 文件中来调用我们的组件查看效果。
3 构 建
构建主要是对 package.json 文件进行更改。以我的为例。
"name": "k-progress",
"version": "1.0.0",
"main": "./dist/k-progress.common.js",
"files": [
"dist"
],
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"package": "vue-cli-service build --target lib --k-progress main ./src/components/index.js"
},
-
name: 插件名称； -
version: 版本号，每次npm publish都需要进行更改； -
main: 插件的主文件路径； -
files: 发布保留的文件； -
private: 这里要改成false; -
scripts: 执行命令；
执行 yarn package 进行构建命令，不熟悉 yarn 的可以执行 npm run package，不过真心推荐 yarn。
4 发 布
4.1 注册账号
4.2 登 录
在自己的项目中，执行 npm login，会提示让你输入 npm 账号密码。
可以通过 npm whoami 来检查自己是否登录成功。
4.3 发 布
npm publish
这里列出可能出现的 2 个错误。
-
"private": true会报错 -
version：publish过一次后，相同版本的无法再次发布
5 后 记
感谢支持。
若不足之处，欢迎大家指出，共勉。
如果觉得不错，记得 点赞，谢谢大家 ʚ💖ɞ
欢迎关注。
