npm包發(fā)布和刪除的超詳細(xì)教程
一.新建npm項(xiàng)目包
1.新建目錄包yuan_mytools
注意：在新建npm項(xiàng)目包的時(shí)候，可以先去官網(wǎng)搜一下是否有重名的，不允許重名?。?！
新建項(xiàng)目包yuan-mytools，創(chuàng)建src目錄，并在src目錄中創(chuàng)建自定義模塊（我的自定義模塊是dateFormat和htmlEscape），并在項(xiàng)目包的根目錄下創(chuàng)建入口文件yuan.js和README.md文檔
2.創(chuàng)建包管理配置文件package.json
在項(xiàng)目yuan-mytools的根目錄運(yùn)行終端命令，快速創(chuàng)建package.json
npm init -y
注意：上述命令只能在英文的目錄下成功運(yùn)行！所以，項(xiàng)目文件夾的名稱一定要使用英文命名，不要使用中文，不能出現(xiàn)空格。
3.配置package.json
（1）name ：npm項(xiàng)目包名，發(fā)布到npm時(shí)包名取的這個(gè)name；
（2）version ：版本號，第一次發(fā)布，版本號可以設(shè)置為@1.0.0，更新npm包時(shí)必須修改一個(gè)更高的版本號后才能成功發(fā)布到npm；
（3）description ：包的描述，發(fā)布到npm后你搜索該npm包時(shí)，在搜索聯(lián)想列表里會顯示在包名的下方，作為描述說明；
（4）main ：入口文件路徑，在你通過import或require引用該npm包時(shí)就是引入的該路徑的文件；
（5）keywords：關(guān)鍵字，在官網(wǎng)搜索該包時(shí)，使用這些關(guān)鍵字可以搜索出來；
（6）license：開源協(xié)議，默認(rèn)是ISC；
4.實(shí)現(xiàn)格式化日期的功能
dateFormat.js
// 定義格式化時(shí)間的函數(shù)
function dateFormat(dataStr) {
const date = new Date(dataStr)
const year = date.getFullYear()
// 月份是從0-11，需要加一
const month = padZero(date.getMonth() + 1)
const day = padZero(date.getDate())
const hour = padZero(date.getHours())
const minute = padZero(date.getMinutes())
const second = padZero(date.getSeconds())
// 使用模板字符串進(jìn)行拼接
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
//補(bǔ)零函數(shù)
function padZero(date) {
return date > 9 ? date : '0' + date
}
// 對外共享該模塊
module.exports = {
dateFormat
}5.實(shí)現(xiàn)html特殊字符的轉(zhuǎn)義和還原
（1）轉(zhuǎn)義html中的特殊字符，包括<、>、$、"等
// 轉(zhuǎn)義html中的特殊字符
function htmlEscape(htmlStr) {
return htmlStr.replace(/<|>|&|"/g, (match) => {
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '"':
return '"'
case '&':
return '&'
}
})
}（2）還原h(huán)tml中的特殊字符，包括<、>、"、$amp;等
// 還原h(huán)tml中的特殊字符function htmlUnEscape(htmlStr) { return htmlStr.replace(/<|>|"|&/g, (match) => { switch (match) { case '<': return '<' case '>': return '>' case '"': return '"' case '&': return '&' } })}// 對外共享模塊htmlEscape和htmlUnEscape模塊module.exports = { htmlEscape, htmlUnEscape}6.入口文件yuan.js
在入口文件yuan.js中導(dǎo)入兩個(gè)模塊，并且結(jié)構(gòu)對象之后對外共享
const date = require('./src/dateFormat')
const escape = require('./src/htmlEscape')
module.exports = {
...date,
...escape
}7.編寫README.md說明文檔，包括安裝方式、導(dǎo)入方式、格式化時(shí)間、轉(zhuǎn)義 HTML 中的特殊字符、還原 HTML 中的特殊字符、開源協(xié)議
## 安裝
```
npm install yuan-mytools
```
## 導(dǎo)入
```js
const yuan = require('./yuan-mytools')
```
## 格式化時(shí)間
```js
const date = new Date()
// 調(diào)用dateFormat對時(shí)間進(jìn)行格式化
console.log(yuan.dateFormat(date))
```
## 轉(zhuǎn)義html中的特殊字符
```js
const str = '<h1 title="abc">這是h1標(biāo)簽<span>123 </span></h1>'
// 調(diào)用htmlEscape對特殊字符進(jìn)行轉(zhuǎn)義
const newStr = yuan.htmlEscape(str)
// 轉(zhuǎn)換的結(jié)果為 <h1 title="abc">這是h1標(biāo)簽<span>123&nbsp;</span></h1>
console.log(newStr)
```
## 還原h(huán)tml總的特殊字符
```js
const str = '<h1 title="abc">這是h1標(biāo)簽<span>123 </span></h1>'
const newStr = yuan.htmlEscape(str)
console.log(newStr)
// 調(diào)用htmlUnEscape對特殊字符進(jìn)行還原
console.log(yuan.htmlUnEscape(newStr))
```
## 開源協(xié)議
ISC注意：在npm官網(wǎng)發(fā)布包之后，README文檔將會作為介紹放在首頁
二.發(fā)布npm包
1.注冊npm賬號
- 訪問 https://www.npmjs.com/ 網(wǎng)站，點(diǎn)擊 sign up 按鈕，進(jìn)入注冊用戶界面
- 填寫賬號相關(guān)的信息：Full Name、Public Email、Username、Password
- 點(diǎn)擊 Create an Account 按鈕，注冊賬號
- 登錄郵箱，點(diǎn)擊驗(yàn)證鏈接，進(jìn)行賬號的驗(yàn)證
2.登錄 npm 賬號
npm 賬號注冊完成后，可以在終端中執(zhí)行 npm login 命令，依次輸入用戶名、密碼、郵箱后，即可登錄成功。
注意：在運(yùn)行 npm login 命令之前，必須先把下包的服務(wù)器地址切換為 npm 的官方服務(wù)器。否則會導(dǎo)致發(fā)布包失敗！
3.把包發(fā)布到 npm 上
將終端切換到包的根目錄之后，運(yùn)行 npm publish 命令，即可將包發(fā)布到 npm 上（注意：包名不能雷同）。
三.刪除已發(fā)布的包
1.運(yùn)行 npm unpublish 包名 --force 命令，即可從 npm 刪除已發(fā)布的包。
注意：
- npm unpublish 命令只能刪除 72 小時(shí)以內(nèi)發(fā)布的包
- npm unpublish 刪除的包，在 24 小時(shí)內(nèi)不允許重復(fù)發(fā)布
- 發(fā)布包的時(shí)候要慎重，盡量不要往 npm 上發(fā)布沒有意義的包！
補(bǔ)充：項(xiàng)目中多余的npm包怎么快速刪除？
在公司中，我們大部分都是多人共同開發(fā)和長時(shí)間維護(hù)一個(gè)項(xiàng)目，但是有時(shí)候我們會發(fā)現(xiàn)有很多已經(jīng)廢棄的npm 包存在 package.json 中，我們想要?jiǎng)h除，但是又不能盲目的刪除？那么 depcheck 它來了。
如何使用呢
第一步
全局安裝：
npm install depcheck -g
第二步
項(xiàng)目更目錄下執(zhí)行 depcheck (這里拿我們自己的項(xiàng)目來做的測試），執(zhí)行之后，根據(jù)自己得到的結(jié)果人工刪除即可
Unused dependencies * @xkeshi/vue-qrcode * any-promise * backpack-core * cookie-universal-nuxt * tls * to * vue-loader * vue-meta-info Unused devDependencies * @babel/cli * @babel/preset-es2015 * @babel/preset-react * @babel/preset-stage-0 * @babel/register * @nuxtjs/sentry * axios-mock-adapter * babel-eslint * babel-loader * babel-plugin-component * child_process * css-loader * element-theme * element-theme-chalk * es3-compatible-webpack-plugin * es3ify-loader * eslint-friendly-formatter * eslint-loader * eslint-plugin-html * express * fs * http-proxy-middleware * jsencrypt * lang * net * node-sass * post-loader * qs * sass-loader * vue-style-loader * webpack-cli Missing dependencies * vue-no-ssr: ./.nuxt/components/no-ssr.js * unfetch: ./.nuxt/client.js * consola: ./.nuxt/client.js * nuxt_plugin_route_338f5eda: ./.nuxt/index.js * nuxt_plugin_main_6a83762f: ./.nuxt/index.js * nuxt_plugin_http_6a8178fe: ./.nuxt/index.js * nuxt_plugin_qrcode_7ec40a18: ./.nuxt/index.js * nuxt_plugin_aliyunosssdkmin_02f21098: ./.nuxt/index.js * nuxt_plugin_aliyunuploadsdk131min_c379eff6: ./.nuxt/index.js * vue-router: ./.nuxt/router.js * node-fetch: ./.nuxt/server.js * vuex: ./.nuxt/store.js * ~: ./assets/more-editor/more-editor.js * resize-observer-polyfill: ./component/util/resizeEvent.js * co: ./pages/circle/component/dakaEditor/editor.vue
總結(jié)
到此這篇關(guān)于npm包發(fā)布和刪除的文章就介紹到這了,更多相關(guān)npm包發(fā)布刪除內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
教你用Node.js與Express建立一個(gè)GraphQL服務(wù)器
GraphQL是一種通過強(qiáng)類型查詢語言構(gòu)建api的新方法,下面這篇文章主要給大家介紹了關(guān)于用Node.js與Express建立一個(gè)GraphQL服務(wù)器的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
Linux 安裝nodejs環(huán)境及路徑配置詳細(xì)步驟
大家都知道linux安裝nodejs有兩種比較常用的方法，一種解壓即可用的方法操作比較簡便，另一種方法通過編譯來安裝，本文重點(diǎn)給大家講解第一種方法，感興趣的朋友跟隨小編一起看看吧2021-11-11
這篇文章主要給大家介紹了關(guān)于node.js錯(cuò)誤處理之npm無法下載第三方包的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的幫助,需要的朋友可以參考下2023-07-07
nodejs+axios爬取html出現(xiàn)中文亂碼并解決示例
這篇文章主要為大家介紹了nodejs+axios爬取html出現(xiàn)中文亂碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
詳細(xì)談?wù)凬odeJS進(jìn)程是如何退出的
這篇文章主要給大家介紹了關(guān)于NodeJS進(jìn)程是如何退出的相關(guān)資料,主要介紹了導(dǎo)致進(jìn)程退出的三個(gè)因素：主動退出;未捕獲的異常、未處理的 promise rejection;未處理的 Event Emitter error 事件 系統(tǒng)信號,需要的朋友可以參考下2021-07-07
nodejs結(jié)合Socket.IO實(shí)現(xiàn)websocket即時(shí)通訊
websocket 是一種網(wǎng)絡(luò)通信協(xié)議，一般用來進(jìn)行實(shí)時(shí)通信會使用到。本文主要介紹了nodejs結(jié)合Socket.IO實(shí)現(xiàn)websocket即時(shí)通訊 ，感興趣的可以了解一下2021-11-11
這篇文章主要介紹了淺談手寫node可讀流之流動模式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
Node.js折騰記一：讀指定文件夾，輸出該文件夾的文件樹詳解
這篇文章主要介紹了Node.js讀指定文件夾輸出該文件夾文件樹，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Puppeteer 爬取動態(tài)生成的網(wǎng)頁實(shí)戰(zhàn)
這篇文章主要介紹了Puppeteer 爬取動態(tài)生成的網(wǎng)頁實(shí)戰(zhàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了淺談node中的cluster集群，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06