基于vue组件库npm包的创建与发布
文章 364 0 0 0
发布时间:2020年11月16日

概述

npm是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题

npm简介

npm,全称【node package management】,是nodejs内置的软件包管理器。毫无疑问,npm是用来管理软件包的。

它是世界上最大的软件注册表,每星期大约有30亿次的下载量,包含超过600000个包(包)(即,代码模块)。来自各大洲的开源软件开发者使用NPM互相分享和借鉴.包的结构使您能够轻松跟踪依赖项和版本。

npm由三大独立部分组成:

  1. 网站:开发者查找包(package)、设置参数以及管理 npm 使用体验的主要途径,网址为:https://www.npmjs.com/
  2. 注册表:是一个巨大的数据库,保存了每个包的基本信息。
  3. 命令行工具:开发者与npm包打交道的工具。

npm的使用方法

要使用npm这个软件包管理工具,最常见的方法就是在电脑上安装nodejs,下载地址为:http://nodejs.cn/download/ ,因为nodejs软件内置了npm,所以windows系统在安装nodejs后,打开cmd即可使用npm下载资源;Linux安装nodejs后,打开终端,即可使用npm命令下载资源,nodejs安装过程非常简单,这里不再赘述。

准备工作

注册账户

npm注册地址
需要用到,用户名,邮箱,密码,用户名和密码要牢记发布包的时候要用到。

构建一个项目

npm init初始化你的npm包

package.json

name: 项目的名称,确保在npm包里是独一无二的。

version: 版本号。

description: 包描述。

entry point: 包主入口文件。

test command: 测试命令。一般是npm run test,上线之前确保你的包有测试用例。

git repository: git远程地址,随便填写一个,后期项目上传之后修改。

keywords: 关键词,方便npm包检索,与html中keywords有点像。

author: 作者。

license: MIT或者ISC,我也不懂有什么区别,反正MIT就对了。

添加开源协议

The MIT License (MIT)

Copyright (c) 2020 追梦猪

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

入口文件

import ZmzUiButton from './button/index.js';
import ZmzTag from './tag/index'

// ...继续添加

const components = [
    ZmzUiButton,
    ZmzTag
    // ...继续添加
]

const install = function (Vue, opts = {}) {
    components.map(component => {
        Vue.component(component.name, component);
    })
}

/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}

export default {
    install,
    ZmzUiButton,
    ZmzTag
    // ...继续添加
}

测试组件

在发正式包之前可以在本地先打一个包,然后测试下有没有问题,如果没问题再发布到npm上。
首先,打包到本地

npm run build
npm pack

npm pack 之后,就会在当前目录下生成 一个tgz 的文件。
打开一个新的vue项目,在当前路径下执行(‘路径’ 表示文件所在的位置)

npm install 组件名称.tgz

然后,在新项目的入口文件(main.js)中引入

import 变量名 from '组件名称'
Vue.use(变量名)

发布

在前面测试组件可以正常使用后 就可进行发布了

在npm上注册好账号,并且邮箱通过验证
有了账号以后 就可以进行发布了

1.npm login 输入账号,密码,邮箱

2.npm publish 回车就可以了

3.npm --force unpublish 包名称 删除发布的测试包(删除包要24小时之后才能上传)

npm 常用操作

  1. npm config set registry https://registry.npm.taobao.org //设置淘宝镜像
  2. npm config set registry http://registry.npmjs.org //设置官方镜像
  3. npm config get registry //获取镜像地址
  4. npm —force unpublish safe_manage_view //删除npm包
  5. npm login //npm 登录
  6. npm publish //npm 发布包
  7. npm install —save hzm-npm-test //安装包
  8. npm pack //打包

本地包的更新

在package.json 文件所在的目录中执行 npm update 命令

执行 npm outdated 命令。不应该任何输出

全局包的更新

npm update -g <package> 更新某一个全局包

npm update -g 更新所有的全局包

包的删除

本地包删除 :npm uninstall <package>

全局包删除 :npm uninstall -g <package>

正式版提交

npm publish

npm install <package>

 测试版提交

npm publish --tag=beta

npm install <package>@beta

npm info <package> 查看信息

评论专区