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

创建项目

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

1
npm init
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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文件，例：

1
2
3
/**/*
!dist/gaia.demo.map.js
!ACKNOWLEDGEMENT

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

提交发布上面创建的包

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

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

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

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

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

1
npm publish --access public

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

  • 测试是否提交成功

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

1
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

地址格式为：

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

如：

1
https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js