开发发布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维边缘提取中体现在提取边缘轮廓后将一些梯度方向变化率较小…

【数据结构】——冒泡排序、插入排序、选择排序

# 冒泡排序&#xff0c;复杂度为O(n^2) def bubble_sorted(li:list)->list:for i in range(len(li)):# 第几趟exchanged False# 这个是为了防止多余的遍历&#xff0c;如果前面的元素已经是排序好的&#xff0c;那就不需要再进行比较了&#xff0c;减少运行时间for j in ra…

【转载】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…

python 计算器

--coding:utf-8-- from Tkinter import * 创建横条型框架 def frame(root, side): w Frame(root) w.pack(side side, expand YES, fill BOTH) return w 创建按钮 def button(root, side, text, command None): w Button(root, text text, command command) w.pack(side…

最长公共子序列(LCS)

注意最长公共子串&#xff08;Longest CommonSubstring&#xff09;和最长公共子序列&#xff08;LongestCommon Subsequence, LCS&#xff09;的区别&#xff1a;子串&#xff08;Substring&#xff09;是串的一个连续的部分&#xff0c;子序列&#xff08;Subsequence&#x…

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

目录 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;采用所…

二分法php

二分法。分别使用while循环的方法和递归调用的方法。 <?php// 二分法的使用数组必须是有序的&#xff0c;或升序&#xff0c;或降序 $arr array(1, 3, 5, 7, 9, 13 );// 递归调用&#xff08;相比较好理解 function bsearch_r($v, $arr, $low, $high){if ($low > $high…

【JZOJ4861】【NOIP2016提高A组集训第7场11.4】推冰块

题目描述 Dpstr最近迷上了推冰块。冰地是一个n行m列的网格区域&#xff0c;第i行第j列的格子记为(i,j)&#xff0c;也就是左上角为(1,1)&#xff0c;右下角为(n,m)。每个格子可能是冰面、障碍物、减速带三者之一。其中&#xff0c;冰地外围&#xff08;即第0行、第n1行、第0列、…

【图像处理面试题】——1

链接&#xff1a;https://www.jianshu.com/p/e58ca1775700 1、给定0-1矩阵&#xff0c;求连通域。2、写一个函数&#xff0c;求灰度图的直方图。3、写一个均值滤波&#xff08;中值滤波&#xff09;。4、写出高斯算子&#xff0c;Sobel算子&#xff0c;拉普拉斯算子等&#xff…

IT运维服务管理问题总结 #F#

1.管理现状问题&#xff1a;支撑企业业务运行的IT系统主要由大量的网络设备、主机系统和应用系统组成&#xff0c;这些设备和系统从应用角度来分又属于不同的业务系统和部门&#xff0c;网络设备、主机系统等具备独立的用户管理、认证授权和审计系统&#xff0c;且由不同的系统…

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

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

MATLAB调用Python自定义函数(类、函数等) Python调用MATLAB

一、MATLAB调用Python函数 参考链接&#xff1a;https://blog.csdn.net/qq_27280237/article/details/84644900 知乎链接&#xff1a;https://zhuanlan.zhihu.com/p/92081119 知乎上这位说的更加的详细&#xff0c;感谢 二、Python调用MATLAB-API 知乎链接&#xff1a;htt…

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

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

iOS:真机调试

真机调试现在发生了改变&#xff0c;在Xcode7以前进行真机调试是需要证书的&#xff0c;正是由于这个原因&#xff0c;这个过程比较麻烦&#xff1b;在Xcode7以后是免证书的&#xff0c;使用起来就简单很多了。 Xcode7以前的步骤如下&#xff1a; 原链接地址为&#xff1a;http…

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

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