NPM 包管理和发布

最近试着发布了一两个NPM包,一个是mapbox 的一些插件类,另一个是vudio,一个音频可视化的库。简单记录下NPM 包管理的一些操作,主要是发布包的一些概念和注意点

Vudio snapshot

关键字段

首先,我们得有一个有package.json 文件的文件夹,其中有几个关键字段需要注意。

NPM包nameversion 是必须的,version 得是符合semversion 规范的,也就是 major.minor.patch 三个数字组成,大版本小版本和patch。比如每次 npm publish 之前可以通过npm version minor 去自动增加一个小版本数字,会自动修改package.json 中的 version 值。也就是说最好不要手动改 package.json文件中的version 字段。

比如vudio 的版本号本来是 2.0.3,npm version minor 之后版本号自动变为2.1.0

npm version minor
npm version
> { vudio: '2.1.0',
  npm: '5.5.1',
...
}

npm publish

main,browser 字段

以我的vudio 包package文件为例

// package.json of my NPM package Vudio
{
  "name": "vudio",
  "version": "2.0.4",
  "description": "visualization audio using AudioContext and Canvas",
  "main": "umd/vudio.js",  // 如果是esModule 或者node.js的包,把入口文件填这里
  "browser": "umd/vudio.js",  // 如果这个包针对浏览器环境,那填这里
  "files": [
    "umd",
    "*"
  ]
}

这几个字段比较有用,main字段标识了你 npm 包的入口,比如别人安装了我的包, 在 nodejs 程序中 require 我导出的模块对象,实际上就会去packge.json中查找 main 字段,到底指的是哪个js 文件

var Vudio = require('vudio')
// 实际上等效于
var Vudio = require('vudio/umd/vudio.js')

通过require或者import引入NPM包时,是读取 main 字段来获取入口文件地址。这主要针对符合common.js和esModule 模块规范的第三方NPM 包。如果你要发布的NPM 包只能在 browser 环境下运行,比如要依赖 window,DOM这类浏览器环境下的要素。那可以直接给 browser 字段指定你的 umd 文件地址,也就是通用模块定义文件。

UMD 模块定义方式

这种导出模块的典型特征就是适配各种运行环境,不管是浏览器还是nodejs环境,都可以顺利导出模块,优雅适配

// 典型的umd 模块导出
(function(factory){
    if (typeof exports === 'object') {  // 支持Common.js 
         module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {  // 支持AMD
         define(factory); 
    } else {
         window.Vudio = factory();   // 浏览器环境
    }

 })(function() {
    /// 你的功能
    function Vudio(){
    //// .....
    }
    return Vudio
})

这样 npm publish 之后就可以在npm仓库里查到你的包了。有个问题就是publish 之前得 npm login 下,另外要确保你的 package name 是全网唯一,不然会提示 403,没有权限提交。

提交给CDN

除了把NPM包发布给 官方仓库,还可以顺手提交给 https://unpkg.com/ 这样的 CDN 网站,实际上是Cloudflare 提供的CDN 服务。
主要做到两点:

  • 添加 umd (or dist) 文件夹到 .gitignore 文件中,也就是说在git repo 里面忽略这个用于发布包的文件夹
  • umd 文件夹地址添加到package.jsonfiles array 字段中

files字段指的是,你要把哪些文件、文件夹包含在NPM包里面。这样你 npm publish 的时候只会把这部分文件(通常是必要的,无个人数据的)打包 tgz 提交给npm 仓库。

配置完成后,npm publish 之后就可以在unpkg CDN 上查到自己的包了. 一般地址是
unpkg.com/:package@:version/:file

参考文档:

创建和发布NPM包的官方文档

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,377评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,390评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,967评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,344评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,441评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,492评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,497评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,274评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,732评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,008评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,184评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,837评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,520评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,156评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,407评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,056评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,074评论 2 352

推荐阅读更多精彩内容

  • npm是什么 NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具...
    build1024阅读 7,873评论 0 9
  • NPM官方文档写的十分良心,此篇我做一些比较常用功能的积累,有些地方是翻译,有些地方省略可以去官文看。 NPM是什...
    宋乐怡阅读 2,395评论 0 2
  • NPM笔记: 名字的含义: 1、是Node的开放式模块登记和管理系统 2、Node默认的模块管理器,是一个命令行下...
    名字神马的都是浮云阅读 842评论 0 3
  • 什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP。 ...
    ihoey阅读 6,249评论 2 36
  • 周末,难得出门一次,逛了几个小时准备回家,刚好走到商场门口才发现几个小时前还晴空万里而现在却早已黑压压一片...
    弭墨洒阅读 1,255评论 0 2