打包發佈到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