本文主要講述基于webpack編寫(xiě)js包文件后上傳到npm芥被，并通過(guò)cdn進(jìn)行訪問(wèn)葫笼。
創(chuàng)建項(xiàng)目
在自己新建的文件夾下執(zhí)行如下代碼：
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)
按照提示填寫(xiě)基本信息
| 配置項(xiàng) | 意義 | 默認(rèn)值 |
|---|---|---|
| name | 包的名字 | 默認(rèn)是所在文件夾的名字 |
| version | 包的版本 | 1.0.0 |
| description | 項(xiàng)目描述 | |
| entry point | 入口文件 | index.js |
| test command | 測(cè)試命令 | |
| git respository | 源代碼git倉(cāng)庫(kù)地址 | |
| keyword | 關(guān)鍵字，會(huì)顯示在npm中础废，方便別人搜索 | |
| author | 作者 | |
| license | 執(zhí)照 |
確認(rèn)后會(huì)發(fā)現(xiàn)文件目錄內(nèi)多出來(lái)一個(gè)package.json文件
開(kāi)始寫(xiě)代碼汛骂，參照webpack教程
發(fā)布到NPM
注冊(cè)npm賬號(hào)
在npm官網(wǎng)注冊(cè)https://www.npmjs.com。
注意郵箱要驗(yàn)證评腺，會(huì)發(fā)送驗(yàn)證鏈接到你的注冊(cè)郵箱帘瞭，沒(méi)有驗(yàn)證的話是不能發(fā)布代碼的
添加.npmignore文件，例：
/**/*
!dist/gaia.demo.map.js
!ACKNOWLEDGEMENT
這樣會(huì)將build后的dist文件夾內(nèi)的js包文件發(fā)布到npm蒿讥，方便后續(xù)通過(guò)cdn訪問(wèn)
提交發(fā)布上面創(chuàng)建的包
- 先登錄你的npm賬號(hào)
$ npm adduser
Username: your name
Password: your password
Email: yourmail
按照你注冊(cè)的賬號(hào)配置好蝶念，這時(shí)候看一下package.json中author盡量與npm賬戶一致
在根目錄下配置賬號(hào)信息，只用配置一次即可芋绸，我上傳的時(shí)候發(fā)現(xiàn)有提示必須admin權(quán)限才能上傳問(wèn)題就是沒(méi)在根目錄下配置信息
- 檢查是否登錄成功:
npm who am i
# 如果不成功則重新登錄一下
npm login
- 配置成功之后提交代碼
npm publish
注意：如果提示包不能為private媒殉，需要執(zhí)行下面的發(fā)布方式：
npm publish --access public
注意每次提交版本號(hào)都要比上次的高
- 測(cè)試是否提交成功
去官網(wǎng)你的賬號(hào)下面看一下有沒(méi)有
或者直接npm下載下來(lái)
npm i mtmap
npm的版本控制
在我們的package.json里面有一個(gè)version字段 ，每次提交到npm摔敛，版本號(hào)需要增加廷蓉。 或者自己手動(dòng)修改，或者使用 “npm version <update_type>” 命令
npm有一套自己的版本控制標(biāo)準(zhǔn)——Semantic versioning（語(yǔ)義化版本）
具體體現(xiàn)為：
對(duì)于"version":"x.y.z"
1.修復(fù)bug,小改動(dòng)马昙，增加z
2.增加了新特性桃犬，但仍能向后兼容刹悴，增加y
3.有很大的改動(dòng)，無(wú)法向后兼容,增加x
例如：我原本的項(xiàng)目是1.0.0版本的話
若是1中情況攒暇，變?yōu)?.0.1
若是2中情況土匀，變?yōu)?.1.0
若是3中情況，變?yōu)?.0.0
通過(guò)npm version <update_type>自動(dòng)改變版本
update_type為patch, minor, or major其中之一形用，分別表示補(bǔ)丁就轧，小改，大改
一些常見(jiàn)的錯(cuò)誤
1.no_perms Private mode enable, only admin can publish this module
這是因?yàn)殓R像設(shè)置成淘寶鏡像了田度，設(shè)置回來(lái)即可
npm config set registry http://registry.npmjs.org
2.npm publish failed put 500 unexpected status code 401
一般是沒(méi)有登錄钓丰，重新登錄一下 npm login 即可
3.npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?
包名被占用，改個(gè)包名即可每币。最好在官網(wǎng)查一下是否有包名被占用，之后再重命名
4.you must verify your email before publishing a new package
郵箱未驗(yàn)證琢歇，去官網(wǎng)驗(yàn)證一下郵箱
通過(guò)CDN訪問(wèn)
這里使用的是jsdelivr
地址格式為：
https://cdn.jsdelivr.net/npm/(your packagename)@(version)/(file)
如：
https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js
