打包发布到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 ” 命令

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为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