npm包發(fā)布和刪除的超詳細教程
一.新建npm項目包
1.新建目錄包yuan_mytools
注意:在新建npm項目包的時候,可以先去官網(wǎng)搜一下是否有重名的,不允許重名!??!
新建項目包yuan-mytools,創(chuàng)建src目錄,并在src目錄中創(chuàng)建自定義模塊(我的自定義模塊是dateFormat和htmlEscape),并在項目包的根目錄下創(chuàng)建入口文件yuan.js和README.md文檔
2.創(chuàng)建包管理配置文件package.json
在項目yuan-mytools的根目錄運行終端命令,快速創(chuàng)建package.json
npm init -y
注意:上述命令只能在英文的目錄下成功運行!所以,項目文件夾的名稱一定要使用英文命名,不要使用中文,不能出現(xiàn)空格。
3.配置package.json
(1)name :npm項目包名,發(fā)布到npm時包名取的這個name;
(2)version :版本號,第一次發(fā)布,版本號可以設(shè)置為@1.0.0,更新npm包時必須修改一個更高的版本號后才能成功發(fā)布到npm;
(3)description :包的描述,發(fā)布到npm后你搜索該npm包時,在搜索聯(lián)想列表里會顯示在包名的下方,作為描述說明;
(4)main :入口文件路徑,在你通過import或require引用該npm包時就是引入的該路徑的文件;
(5)keywords:關(guān)鍵字,在官網(wǎng)搜索該包時,使用這些關(guān)鍵字可以搜索出來;
(6)license:開源協(xié)議,默認是ISC;
4.實現(xiàn)格式化日期的功能
dateFormat.js
// 定義格式化時間的函數(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()) // 使用模板字符串進行拼接 return `${year}-${month}-${day} ${hour}:${minute}:${second}` } //補零函數(shù) function padZero(date) { return date > 9 ? date : '0' + date } // 對外共享該模塊 module.exports = { dateFormat }
5.實現(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)入兩個模塊,并且結(jié)構(gòu)對象之后對外共享
const date = require('./src/dateFormat') const escape = require('./src/htmlEscape') module.exports = { ...date, ...escape }
7.編寫README.md說明文檔,包括安裝方式、導(dǎo)入方式、格式化時間、轉(zhuǎn)義 HTML 中的特殊字符、還原 HTML 中的特殊字符、開源協(xié)議
## 安裝 ``` npm install yuan-mytools ``` ## 導(dǎo)入 ```js const yuan = require('./yuan-mytools') ``` ## 格式化時間 ```js const date = new Date() // 調(diào)用dateFormat對時間進行格式化 console.log(yuan.dateFormat(date)) ``` ## 轉(zhuǎn)義html中的特殊字符 ```js const str = '<h1 title="abc">這是h1標簽<span>123 </span></h1>' // 調(diào)用htmlEscape對特殊字符進行轉(zhuǎn)義 const newStr = yuan.htmlEscape(str) // 轉(zhuǎn)換的結(jié)果為 <h1 title="abc">這是h1標簽<span>123&nbsp;</span></h1> console.log(newStr) ``` ## 還原h(huán)tml總的特殊字符 ```js const str = '<h1 title="abc">這是h1標簽<span>123 </span></h1>' const newStr = yuan.htmlEscape(str) console.log(newStr) // 調(diào)用htmlUnEscape對特殊字符進行還原 console.log(yuan.htmlUnEscape(newStr)) ``` ## 開源協(xié)議 ISC
注意:在npm官網(wǎng)發(fā)布包之后,README文檔將會作為介紹放在首頁
二.發(fā)布npm包
1.注冊npm賬號
- 訪問 https://www.npmjs.com/ 網(wǎng)站,點擊 sign up 按鈕,進入注冊用戶界面
- 填寫賬號相關(guān)的信息:Full Name、Public Email、Username、Password
- 點擊 Create an Account 按鈕,注冊賬號
- 登錄郵箱,點擊驗證鏈接,進行賬號的驗證
2.登錄 npm 賬號
npm 賬號注冊完成后,可以在終端中執(zhí)行 npm login 命令,依次輸入用戶名、密碼、郵箱后,即可登錄成功。
注意:在運行 npm login 命令之前,必須先把下包的服務(wù)器地址切換為 npm 的官方服務(wù)器。否則會導(dǎo)致發(fā)布包失??!
3.把包發(fā)布到 npm 上
將終端切換到包的根目錄之后,運行 npm publish 命令,即可將包發(fā)布到 npm 上(注意:包名不能雷同)。
三.刪除已發(fā)布的包
1.運行 npm unpublish 包名 --force 命令,即可從 npm 刪除已發(fā)布的包。
注意:
- npm unpublish 命令只能刪除 72 小時以內(nèi)發(fā)布的包
- npm unpublish 刪除的包,在 24 小時內(nèi)不允許重復(fù)發(fā)布
- 發(fā)布包的時候要慎重,盡量不要往 npm 上發(fā)布沒有意義的包!
補充:項目中多余的npm包怎么快速刪除?
在公司中,我們大部分都是多人共同開發(fā)和長時間維護一個項目,但是有時候我們會發(fā)現(xiàn)有很多已經(jīng)廢棄的npm 包存在 package.json 中,我們想要刪除,但是又不能盲目的刪除?那么 depcheck 它來了。
如何使用呢
第一步
全局安裝:
npm install depcheck -g
第二步
項目更目錄下執(zhí)行 depcheck (這里拿我們自己的項目來做的測試),執(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建立一個GraphQL服務(wù)器
GraphQL是一種通過強類型查詢語言構(gòu)建api的新方法,下面這篇文章主要給大家介紹了關(guān)于用Node.js與Express建立一個GraphQL服務(wù)器的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12Linux 安裝nodejs環(huán)境及路徑配置詳細步驟
大家都知道linux安裝nodejs有兩種比較常用的方法,一種解壓即可用的方法操作比較簡便,另一種方法通過編譯來安裝,本文重點給大家講解第一種方法,感興趣的朋友跟隨小編一起看看吧2021-11-11nodejs+axios爬取html出現(xiàn)中文亂碼并解決示例
這篇文章主要為大家介紹了nodejs+axios爬取html出現(xiàn)中文亂碼示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06nodejs結(jié)合Socket.IO實現(xiàn)websocket即時通訊
websocket 是一種網(wǎng)絡(luò)通信協(xié)議,一般用來進行實時通信會使用到。本文主要介紹了nodejs結(jié)合Socket.IO實現(xiàn)websocket即時通訊 ,感興趣的可以了解一下2021-11-11Node.js折騰記一:讀指定文件夾,輸出該文件夾的文件樹詳解
這篇文章主要介紹了Node.js讀指定文件夾輸出該文件夾文件樹,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04Puppeteer 爬取動態(tài)生成的網(wǎng)頁實戰(zhàn)
這篇文章主要介紹了Puppeteer 爬取動態(tài)生成的網(wǎng)頁實戰(zhàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11