开发发布npm module包

开发发布npm module包

问题

在项目开发过程中,每当进入一个新的业务项目,从零开始搭建一套前端项目结构是一件让人头疼的事情,就要重新复制一个上一个项目的前端框架和组件代码库。其中很多功能的模块组件都要重复拷贝,可以统一将这些组件类的模块统一打包上传至npm,以后每次都只需要install一下就可以了。

前期准备工作

  • 安装nodejs
  • github上新建一个repository用于托管组件代码
  • 新建一个npm账户用于发布包

这里以工具组件库中的时间格式转换工具为例,主要用于对Date时间进行不同格式转换。

1,创建组件

新建一个用于放置时间格式转换npm包的文件夹

mkdir timeFormat

初始化配置包json文件package.json

npm init$ npm initThis utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.See `npm help json` for definitive documentation on these fields
and exactly what they do.Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.Press ^C at any time to quit.
name: (node) timeForamt
version: (0.0.0) 0.0.1
description: An easy mongodb client for node.js based on native mongodb driver.
entry point: (index.js) 
test command: make test
git repository: https://github.com/summer7310/timeformat.git
keywords: timeformat 
author: summer7310 
license: (BSD-2-Clause) MIT

clipboard.png

clipboard.png

package.json文件主要用来表述项目信息的,包括名称,版本,依赖,版权,git地址。

在文件夹下新建时间格式转化功能脚本入口文件index.js

具体代码内容:


index.js// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, 
// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
function timeFormat(date, fmt) {var o = {"M+": date.getMonth() + 1, //月份 "d+": date.getDate(), //日 "h+": date.getHours(), //小时 "m+": date.getMinutes(), //分 "s+": date.getSeconds(), //秒 "q+": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 };if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));return fmt;
}exports.timeFormat = timeFormat;

每个组件包需要配一个测试文件用于测试,新建test.js


test.jsvar fn = require('./index.js');
var time = fn.timeFormat(new Date(), "yyyy-MM-dd");
console.log(time);

执行test

node test.js

输出:

D:\npm_test\test>node test.js
2017-12-04

clipboard.png

表示成功

2,发布包至npm

在npm官网注册账号,https://www.npmjs.com

添加用户,输入完用户名,密码,邮箱后没有错误信息就完成了。

$ npm adduser
Username: your name
Password: your password
Email: (this IS public) your email

clipboard.png

查看当前用户:

$npm whoami

显示当前用户名
发布包

$ npm publish

clipboard.png

发现报错,用户没有权限发布该包,这时候去npm官网查一下,发现已经存在该名字的npm包,解决方法就是重命名我们的组件名字,改名为timeFormatUtil

clipboard.png

再次发布,成功后我们去npm官网就能搜到该组件了

clipboard.png

这里大概再罗列一下发布过程中可能遇到的问题和解决方法。

Q1:

npm ERR! no_perms Private mode enable, only admin can publish this module:

这里注意的是因为国内网络问题,许多小伙伴把npm的镜像代理到淘宝或者别的地方了,这里要设置回原来的镜像。


npm config set registry=http://registry.npmjs.org

Q2:

npm ERR! you do not have permission to publish "your module name". Are you logged in as the correct user? 

提示没有权限,其实就是你的module名在npm上已经被占用啦,这时候你就去需要去npm搜索你的模块名称,如果搜索不到,就可以用,并且把package.json里的name修改过来,重新npm publish。

注意

每次修改组件需要重新发布都必须修改当前版本号,要不然npm会认为冲突。

3,下载使用组件

在项目中执行

npm install timeformatutil --save

clipboard.png

执行测试文件


const fn = require('timeformatutil');
let time = fn.timeFormat(new Date(), "yyyy-MM-dd");console.log(time);

成功。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/256083.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何使用ATS提高应用的安全性

App Transport Security&#xff0c;简短的说就是ATS&#xff0c;是iOS9和OS X El Capitan的一个新特性。App Transport Security 的目标是提高Apple 操作系统的安全性以及在此操作系统上运行的任何应用的安全性。 基于HTTP传输数据的网络请求都是明文。开启App Transport Secu…

手机客户端测试考虑的点

手机客户端测试考虑点总结 版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 此文未本人工作中的总结&#xff0c;特此总结。 异常场景&#xff1a; 网络异常&#xff0c;服务器异常&#xff0c;接口异常或参考参数篡改&#xff0c;断电&#xff0c;…

NMS(非极大值抑制)算法详解与示例

一、NMS是什么&#xff1f; NMS&#xff08;non maximum suppression&#xff09;即非极大值抑制&#xff0c;广泛应用于传统的特征提取和深度学习的目标检测算法中。 NMS原理是通过筛选出局部极大值得到最优解。 在2维边缘提取中体现在提取边缘轮廓后将一些梯度方向变化率较小…

【转载】ASP.NET应用程序与页面生命周期

在本文中&#xff0c;我们将了解不同的事件&#xff0c;ASP.NET 应用程序的生命周期以浏览器向 Web 服务器&#xff08;对于 ASP.NET 应用程序&#xff0c;通常为 IIS&#xff09;发送请求为起点&#xff0c;直至将请求结果返回至浏览器结束。在这个过程中&#xff0c;首先我们…

基于PCL的ICP及其变种算法实现

文章目录前言一、ICP算法基础1.1 提取待匹配点对1.2 计算旋转平移矩阵1.3 计算变换后的点和目标点之间的偏差二、ICP算法变种2.1 PLICP2.2 PointToPlane ICP2.3 NICP2.4 LM_ICP三、程序示例1. 传统方法2. PointToPlane ICP总结前言 ICP&#xff08;Iterative Closest Point&am…

【数据结构】——排序算法系列总结

目录 1、空间复杂度 2、稳定性 3、运行时间 4、目前默认的sort内置函数排序函数 5、六种常用排序方法 1、空间复杂度 空间复杂度产生的原因有两个&#xff1a;①重新定义了一块空间用于存储数据&#xff1b;②递归产生了栈空间 冒泡排序、选择排序、堆排序和插入排序属于…

Spring Boot实践教程(二):SpringApplication分析

2019独角兽企业重金招聘Python工程师标准>>> 本文会通过分析上一篇中跑起来的示例程序来分析一下Spring Boot程序运行的基本原理。 概要 在上一篇的介绍中&#xff0c;程序是通过SpringBoot1HelloworldApplication.main()方法运行起来的&#xff1a; public static …

基于PCL的MLS(移动最小二乘)算法简介与示例

一、MLS基础 mls算法本质上和最小二乘一样&#xff0c;是一种拟合数据的算法。区别在于mls是局部的&#xff0c;即通过系数向量和基函数分别对数据中不同位置的节点区域进行拟合&#xff0c;需要计算出全部节点域的拟合函数的参数。而传统的最小二乘是全局的&#xff0c;采用所…

基于PCL的RANSAC(随机采样一致)算法简介与示例

前言 RANSAC&#xff08;Random sample consensus&#xff0c;随机采样一致&#xff09;是3D点云拟合的一种重要的手段&#xff0c;可以对直线、圆、平面&#xff0c;圆球、圆柱等形状的点云进行拟合&#xff0c;其优点在于可以最大程度上减少噪声点对拟合效果的影响。 一、RA…

Testin云測与ARM 战略合作:推动全球移动应用加速进入中国市场

Testin云測与ARM 战略合作&#xff1a;推动全球移动应用加速进入中国市场 2014/10/14 Testin 业界资讯&#xff08;中国北京–2014年10月14日 &#xff09;全球最大的移动游戏、应用真机和用户云測试平台Testin云測今日宣布与ARM建立战略伙伴合作关系&#xff0c;设立“ARM应…

正则表达式快速入门,转载

正则表达式快速入门 首先简单介绍下正则表达式&#xff1a; 在编写处理字符串的程序或网页时&#xff0c;经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说&#xff0c;正则表达式就是记录文本规则的代码。 下面就看看正则表达式里…

【pyqt5】配置Qt Designer之【designer.exe的保存位置及ui文件转py文件及no Qt platform plugin could be initialized 问题解决】

目录 一、寻找designer.exe 二、no Qt platform plugin could be initialized 问题解决 三、ui文件转换为py文件 四、pyqt5的使用教程 一、寻找designer.exe 头疼&#xff0c;找了一上午都没有找到这个的路径&#xff0c;最后还是在评论区看到的&#xff0c;这也不能怪人家…

PCL中GreedyProjection三角化算法简介与示例

文章目录前言一、PCL点云三角化1.1 Delaunay三角剖分1.2 贪婪三角化二、程序示例总结前言 Delaunay三角剖分最初应用于2维领域&#xff0c;而与Greedy三角化算法的结合&#xff0c;使之成为目前在三维重建领域最为基础的算法原理之一&#xff0c;很多学者针对其原理进行改进用…

【pyqt5】 读取numpy arrray 显示图片

目录 1、GUI界面&#xff08;QT designer设计&#xff09; 2、逻辑函数&#xff08;回调等&#xff09; 3、显示图片在label上 0&#xff09;直接利用QPixmap显示图像 1&#xff09;显示彩色图 彩色图显示色调不正常——opencv&#xff08;BGR&#xff09;QT(RGB)需要进行…

【pyqt5】——入门级模板(ui文件+ui转py文件+逻辑py文件)(消息提示框)

目录 1、ui文件 2、ui转py文件 3、逻辑py文件 4、实例 1&#xff09;ui文件——demo.ui 2&#xff09;ui转py文件——demo.py 3)逻辑py文件——demoLogic.py 4)运行结果 1、ui文件 这个文件是直接通过pyqt5 designer进行设计的&#xff0c;相关配置可见《配置Qt Design…

PCL中点特征描述子PFH、FPFH和VFH简述和示例

文章目录前言一、点特征直方图1.1 PFH1.1.1 法线估计1.1.2 特征计算1.2 FPFH1.3 VFH二、示例2.1 PFH计算2.2 FPFH2.3 VFH前言 点特征直方图是PCL中非常重要的特征描述子&#xff0c;在点云匹配、分割、重建等任务中起到关键作用&#xff0c;可以对刚体变换、点云密度和噪声均有…

来一个炫酷的导航条

本文分享一个带动画效果的中英文切换导航条。 鼠标放上去试一下&#xff1a; INDEX 首页 BBS 社区 HOME 我 1.用CSS3实现 效果看上去复杂&#xff0c;其实我们先来做出一个样式&#xff0c;就很简单了。如下&#xff1a; 代码&#xff1a; <nav><ul class"list…

EXCEL小技巧:如何统计非空单元格

http://club.excelhome.net/thread-1187271-1-1.html 下面教大家如果用函数统计非空单元格的数量 首先我们来介绍几个统计函数&#xff1a; 1.COUNT(value1,value2,...) 统计包含数字的单元格个数 2.COUNTA(value1,value2,...) 统计非空单元格的个数 3.COUNTBLANK(range&…

未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序。

报错信息&#xff1a; 解决方案&#xff1a; 1、“设置应用程序池默认属性”/“常规”/”启用32位应用程序”&#xff0c;设置为 true。 如下图所示&#xff1a;&#xff08;已测试&#xff0c;好使&#xff09; 方法二&#xff1a;生成->配置管理器->平台->点击Any C…

008. 限制上传文件的大小

第一种方法: 利用web.config的配置文件项, 进行设置; 前端aspx示例: <% Page Language"C#" AutoEventWireup"true" CodeFile"sendOutEmail.aspx.cs" Inherits"sendOutEmail" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHT…