1 前 言
平时我们在开发的时候经常使用 npm 安装各种组件。
今天我们就来尝试下制作一个自己的组件发布到 npm 上。
这里我以自己刚发布的一个 Vue 组件来介绍。感兴趣的可以来下载玩玩。
k-progress
安 装
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 注册账号
NPM
4.2 登 录
在自己的项目中,执行 npm login ,会提示让你输入 npm 账号密码。
可以通过 npm whoami 来检查自己是否登录成功。
4.3 发 布
npm publish
这里列出可能出现的 2 个错误。
-
"private": true 会报错
-
version :publish 过一次后,相同版本的无法再次发布
5 后 记
感谢支持。
若不足之处,欢迎大家指出,共勉。
如果觉得不错,记得 点赞,谢谢大家 ʚ?ɞ
欢迎关注。
5.1 原文地址
https://xrkffgg./Knotes/blog/13.html
|