开发发布npm module包

开发发布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);

成功。

时间: 2024-10-28 14:33:07

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

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

原文地址:https://www.cnblogs.com/sghy/p/6829747.html 1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 2.命令行工具登录npm npm login 验证登录是否成功 npm who am i 3.创建npm库 npm init 按照提示输入相应内容: 以下为package.json内容: { "name": "z

如何使用npm打包发布nodejs程序包

作者:zhanhailiang 日期:2014-11-20 不论基于任何语言开发内部项目,我们经常会在内部封装一些极具通用性的功能模块.如果我们觉得该通用模块对其它团队有可取之处,完全可以将其开源出去.npm就是发布nodejs程序包的最优工具. 1. 首先在npmjs.org注册一个账号:(可省) https://www.npmjs.org/signup 2. 通过npm adduser来注册新账号或登录老账号: [root@~/wade/nodejs/pv-tj]# npm adduser

react组件化开发发布到npm

1.项目目录 build:webpack打包用(开发环境.发布环境) example:开发环境的模板页 lib:打包好的文件夹(用于发布到npm上) src:想要封装的公共组件 .babelrc:处理es6语法 package.json:打包的依赖文件,管理项目模块包 开发环境配置(webpack.dev.config.js) const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin')

怎么开发一个npm包

一.注册npm账号* 怎么将代码提到github,大家都知道需要一个github账号* 同样,开发一个npm包,当然也需要一个npm账号,将npm包发布到npm的托管服务器* 注册地址:[http://npmjs.org](http://npmjs.org)* 该实例包含了模块的局部调用和全局调用两种方式 二.开发npm包 1.目录构建* npm init* 项目结构:```javascript.├── bin //命令配置├── README.md //说明文档├── index.js //主

在npm上发布自己的包 全局包指令使用

看着公司的另外一个同事写了一个静态资源服务器进行打包后的预览, 但是个人觉得他定义的指令实在是太长, 每次都得打一大串, 个人实在受不了. 于是做了个梦, 再梦里自己就写了这么一个东西, 第二天正好公司空闲没啥事干就开始琢磨着去写. 需要准备的: node, npm账号, github仓库, 足够的耐性 开干 : 1.声明npm package.json npm init 2.随后键入package基本信息 name: vsv // 模块名称 version: (1.0.0) 1.0.1 //

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

关于如何使用cnpm搭建私有的npm仓库看这里→ http://blog.fens.me/nodejs-cnpm-npm/ 我本人还没有机会真正实践操作过,公司的npm仓库是我老大搭建的,我这里仅仅记录关于如何发布npm包以及在这过程中出现的问题以及解决的方案. 因为官方的npm上的模块是完全开源,但是公司自己项目有些模块与业务或者逻辑以及一些配置模块肯定不能开源啊,所以需要搭建私有的npm仓库. 1.准备工作 首先安装好npm 以及 cnpm . 现在安装node.js 里会一起安装好npm.

不会发布npm包?进来包会!

前言 本文从发布一个简单的npm包开始,逐步对它进行完(踩)善(坑)和扩(装)展(逼),最后得到一个相对完善的npm包,下面就让我们手摸手,呸!手把手的开始吧! 一.一个最简单的npm包 1.1 新建文件夹 可以找个地方直接建个文件夹,最好语义化一点,这样以后也方便管理,我们这里用终端建文件夹: mkdir toupper-case-project // 这里我们建了一个名为toupper-case-project的文件夹 (对命令行还不太熟的小伙伴可以看看我这篇博客命令行不会?看这里) 1.2

创建并发布npm包

1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 2.命令行工具登录npm npm login 验证登录是否成功 npm who am i 3.创建npm库 npm init 按照提示输入相应内容: 以下为package.json内容: { "name": "zgb_npm", "version": "1.0.0&qu

如何上传发布自己的npm组件包

本文介绍如果上传自己写的 npm 组件包到 npm私库上.当你 写好了自己的一个npm的组件想共享上去给别人或者给公司的同事使用的时候,你可以把你的npm组件发布上去 (publish).不过npm的全局库估计你是上传不上去的,要经过审核,但是你可以上传到你自己公司的私库,搭建私库的教程可以参见 http://blog.csdn.net/nsrainbow/article/details/35989657 前提条件: 你已经建好了一个公司的私库,这个私库地址是 http://localhost: