开发发布npm module包

问题

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

前期准备工作

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

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

1,创建组件

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

mkdir timeFormat

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

npm init

$ npm init

This 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



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.js

var 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

表示成功

2,发布包至npm

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

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

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

查看当前用户:

$npm whoami

显示当前用户名

发布包

$ npm publish

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

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



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

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

执行测试文件

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

成功。

开发发布npm module包的更多相关文章

  1. 开发并发布npm包,支持TypeScript提示,rollup构建打包

    前言: 工作了几年,想把一些不好找现成的库的常用方法整理一下,发布成npm包,方便使用.也学习一下开发发布流程. 主要用到的工具:npm. 开发库:babel.typescript.rollup.es ...

  2. 如何开发一个npm包并发布

    一.安装nodejs 不多说了,网上教程多得是 二.创建自己的npm包 目录结构 npm-test a.js b.js package.json 开发 为了简单便于理解,就开发一个简单地hello程序 ...

  3. 如何开发一个npm包并发布到npm中央仓库

    转自: https://liaolongdong.com/2019/01/24/publish-public-npm.html 如何开发一个npm包并发布到npm中央仓库需求背景:平时在项目工作中可能 ...

  4. (转)前端开发-发布一个NPM包之最简单易懂流程

    原文地址:https://www.cnblogs.com/sghy/p/6829747.html 1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站 ...

  5. 使用Vue-cli3.0创建的项目,如何发布npm包

    使用Vue-cli3.0创建的项目,如何发布npm包 在使用vue进行项目开发时,如果我们想要发布一个包,有时候会有点迷糊,不知道应该怎么修改脚手架的默认设置.这里记录一下一些常见的操作. 创建ind ...

  6. 使用cnpm搭建私有NPM仓库 发布npm包

    关于如何使用cnpm搭建私有的npm仓库看这里→ http://blog.fens.me/nodejs-cnpm-npm/ 我本人还没有机会真正实践操作过,公司的npm仓库是我老大搭建的,我这里仅仅记 ...

  7. 不会发布npm包?进来看看?

    前言 npm(Node Package Manager),一个Node的包管理器,平时我们常用的公共模块(插件)或者叫做包大多都放在上面,所以接下来要封装的插件,我们就简单称它为npm包,本文从就从这 ...

  8. 开发属于自己的包,并上传到npm上

    1.DIY开发包 1.1符合标准的包结构 一个规范的包,它的组成结构,必须符合以下3点要求: 包必须以单独的目录而存在 包的顶级目录下,必须包含package.json这个包管理文件 package. ...

  9. 创建并发布npm包

    1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 2.命令行工具登录npm np ...

随机推荐

  1. 利用MSF批量打RMI漏洞

    声明:不会Java. 参考:https://www.secpulse.com/archives/6203.html 下载mjet,https://github.com/mogwaisec/mjet 按 ...

  2. webstorm window找不到文件'chrome'

    1.打开webstorm设置: File->Settings->Tools->Web Browsers->更改谷歌浏览器的Path(获取方式:谷歌浏览器的快捷键->右键- ...

  3. SpringBoot初始教程之Servlet、Filter、Listener配置(七)

    1.介绍 通过之前的文章来看,SpringBoot涵盖了很多配置,但是往往一些配置是采用原生的Servlet进行的,但是在SpringBoot中不需要配置web.xml的 因为有可能打包之后是一个ja ...

  4. Dropbox的CEO在MIT的毕业演讲

    这是我今天看到的一个演讲,个人觉得和乔老大在斯坦佛的毕业演讲有异曲同工之妙,我也觉得对工科的我们很有启发意义,就此转载,希望与君共勉. 编者注:本篇文章基于Drew Houston 在 MIT 毕业典 ...

  5. [转]ASP.NET母版页中对控件ID的处理

    一.问题提出 由于总体排版和设计的需要,我们往往创建母版页来实现整个网站的统一性,最近我由于统一性的需要,把原来整个项目单独的页面全部套用了母版页.但是出现了一个错误……在我的Blog中记录一下,方便 ...

  6. RabbitMQ + topic发送消息+python

    接口使用两个queue监听信息,且有两个测试环境,所以需要向mq中发送测试数据: python使用pika包:Pika is a RabbitMQ (AMQP-0-9-1) client librar ...

  7. 【Node.js】Jade视图模板的使用

    跟MVC里面的Rezor做差不多的事儿,但是比Rezor弱了一些,比较不喜欢CoffeeScript.Jade这种靠缩进来维系层级结构的做法,就好比接受不了c#中if下面只有一句很长的代码,但是却不加 ...

  8. H5 移动端开发中 ios/安卓坑 和经验总结

    1. ios new时间对象,需要用逗号隔开传日期的方式, 不支持 new Date('2019-03-01 08:00:00') 格式: 支持以下两种方式: 2. ios个别版本对fixed的属性的 ...

  9. 浅析OC语言

    学习一门开发语言,首先要掌握的它的基本语法,这可能几天就能学会,但如果要融会贯通,就得去学习这门语言的框架和一些库,再结合一些项目的应用,这可能需要花几年的时间. OC是C语言的一个超集,是一门面向对 ...

  10. 我的前端工具集(八)获得html元素在页面中的位置

    我的前端工具集(八)获得html元素在页面中的位置   liuyuhang原创,未经允许禁止转载 目录 我的前端工具集 有时候需要用点击等操作,来获取某元素在页面中的位置,然后在该位置添加某些操作 如 ...