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