打包发布到NPM并通过CDN访问

本文主要讲述基于webpack编写js包文件后上传到npm,并通过cdn进行访问。

创建项目

在自己新建的文件夹下执行如下代码:

npm init
name: (mtmap)
version: (1.0.0)
description: xxxxx
entry point: (/dist/gaia.demo.map.js)
test command:
git repository:
keywords:
author: allanhao
license: (ISC) MIT
About to write to E:\github\mtmap\package.json:

{
  "name": "mtmap",
  "version": "0.1.0",
  "description": "xxxxx",
  "main": "/dist/gaia.demo.map.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "allanhao",
  "license": "MIT"
}
Is this ok? (yes) 

按照提示填写基本信息

配置项 意义 默认值
name 包的名字 默认是所在文件夹的名字
version 包的版本 1.0.0
description 项目描述
entry point 入口文件 index.js
test command 测试命令
git respository 源代码git仓库地址
keyword 关键字,会显示在npm中,方便别人搜索
author 作者
license 执照

确认后会发现文件目录内多出来一个package.json文件

开始写代码,参照webpack教程

发布到NPM

注册npm账号

在npm官网注册https://www.npmjs.com
注意邮箱要验证,会发送验证链接到你的注册邮箱,没有验证的话是不能发布代码的

添加.npmignore文件,例:

/**/*
!dist/gaia.demo.map.js
!ACKNOWLEDGEMENT

这样会将build后的dist文件夹内的js包文件发布到npm,方便后续通过cdn访问

提交发布上面创建的包

  • 先登录你的npm账号
$ npm adduser    
Username: your name
Password: your password 
Email: yourmail

按照你注册的账号配置好,这时候看一下package.json中author尽量与npm账户一致

在根目录下配置账号信息,只用配置一次即可,我上传的时候发现有提示必须admin权限才能上传问题就是没在根目录下配置信息

  • 检查是否登录成功:
npm who am i
# 如果不成功则重新登录一下
npm login
  • 配置成功之后提交代码
npm publish

注意:如果提示包不能为private,需要执行下面的发布方式:

npm publish --access public

注意每次提交版本号都要比上次的高

  • 测试是否提交成功

去官网你的账号下面看一下有没有
或者直接npm下载下来

npm i mtmap

npm的版本控制

在我们的package.json里面有一个version字段 ,每次提交到npm,版本号需要增加。 或者自己手动修改,或者使用 “npm version <update_type>” 命令

npm有一套自己的版本控制标准——Semantic versioning(语义化版本)

具体体现为:
对于"version":"x.y.z"
1.修复bug,小改动,增加z
2.增加了新特性,但仍能向后兼容,增加y
3.有很大的改动,无法向后兼容,增加x

例如:我原本的项目是1.0.0版本的话
若是1中情况,变为1.0.1
若是2中情况,变为1.1.0
若是3中情况,变为2.0.0

通过npm version <update_type>自动改变版本
update_type为patch, minor, or major其中之一,分别表示补丁,小改,大改

一些常见的错误

1.no_perms Private mode enable, only admin can publish this module

这是因为镜像设置成淘宝镜像了,设置回来即可

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

2.npm publish failed put 500 unexpected status code 401

一般是没有登录,重新登录一下 npm login 即可

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

包名被占用,改个包名即可。最好在官网查一下是否有包名被占用,之后再重命名

4.you must verify your email before publishing a new package

邮箱未验证,去官网验证一下邮箱

通过CDN访问

这里使用的是jsdelivr

地址格式为:

https://cdn.jsdelivr.net/npm/(your packagename)@(version)/(file)

如:

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

推荐阅读更多精彩内容

  • npm 1. 什么是npm npm是Node官方提供的包管理工具,它已经成了Node包的标准发布平台,用于Node...
    女友要我学会坚强阅读 2,545评论 1 1
  • 什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP。 ...
    ihoey阅读 6,249评论 2 36
  • npm是什么 NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具...
    build1024阅读 7,868评论 0 9
  • 1、npm是什么? NPM (node package manager),通常称为node包管理器。顾名思义,它的...
    徐国军_plus阅读 7,050评论 1 6
  • 高考,每年的六月7号8号总是会如约而至,每年的高考作文必定成为朋友圈、群聊的一波热潮,今年也一样被一波波刷屏。 看...
    心愿菩提阅读 470评论 0 0