1 前 言

平時(shí)我們在開發(fā)的時(shí)候經(jīng)常使用 npm 安裝各種組件。

今天我們就來嘗試下制作一個自己的組件發(fā)布到 npm 上。

這里我以自己剛發(fā)布的一個 Vue 組件來介紹。感興趣的可以來下載玩玩。

k-progress

安 裝

npm install -S k-progress

使 用

// main.js
import 'k-progress';
import 'k-progress/dist/k-progress.css';

2 開 發(fā)

2.1 新建項(xiàng)目

新建一個 Vue ，熟悉的可以直接略過哈。

這里我使用的是 @vue/cli。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

執(zhí)行該命令，可檢查是否安裝成功。

vue --version

我經(jīng)常使用 vue ui 來新建項(xiàng)目，這個命令會生成一個可視化操作頁面，特別方便。

我的項(xiàng)目用到了 scss，新建的時(shí)候勾選上。

至此項(xiàng)目新建完成。

2.2 開發(fā)功能

默認(rèn)新建的項(xiàng)目有個 HelloWorld.vue 的例子，我們可以在這個頁面，引用我們的組件來檢測開發(fā)效果。

在 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;

同時(shí)我們可以在 HelloWorld.vue 文件中來調(diào)用我們的組件查看效果。

3 構(gòu) 建

構(gòu)建主要是對 package.json 文件進(jìn)行更改。以我的為例。

"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 都需要進(jìn)行更改；
• main : 插件的主文件路徑；
• files : 發(fā)布保留的文件；
• private : 這里要改成 false ;
• scripts : 執(zhí)行命令；

執(zhí)行 yarn package 進(jìn)行構(gòu)建命令，不熟悉 yarn 的可以執(zhí)行 npm run package，不過真心推薦 yarn。

4 發(fā) 布

4.1 注冊賬號

NPM

4.2 登 錄

在自己的項(xiàng)目中，執(zhí)行 npm login，會提示讓你輸入 npm 賬號密碼。

可以通過 npm whoami 來檢查自己是否登錄成功。

4.3 發(fā) 布

npm publish

這里列出可能出現(xiàn)的 2 個錯誤。

1. "private": true 會報(bào)錯
2. version ：publish 過一次后，相同版本的無法再次發(fā)布

5 后 記

感謝支持。

若不足之處，歡迎大家指出，共勉。

如果覺得不錯，記得 點(diǎn)贊，謝謝大家 ???

歡迎關(guān)注。

• GitHub
• 掘 金
• 簡 書

5.1 原文地址

https://xrkffgg./Knotes/blog/13.html