開發釋出npm module包

sumer7310發表於2017-12-05
NPM

開發釋出npm module包

問題

在專案開發過程中，每當進入一個新的業務專案，從零開始搭建一套前端專案結構是一件讓人頭疼的事情，就要重新複製一個上一個專案的前端框架和元件程式碼庫。其中很多功能的模組元件都要重複拷貝，可以統一將這些元件類的模組統一打包上傳至npm，以後每次都只需要install一下就可以了。

前期準備工作

  • 安裝nodejs
  • github上新建一個repository用於託管元件程式碼
  • 新建一個npm賬戶用於釋出包

這裡以工具元件庫中的時間格式轉換工具為例，主要用於對Date時間進行不同格式轉換。

1，建立元件

新建一個用於放置時間格式轉換npm包的資料夾

mkdir timeFormat

初始化配置包json檔案package.json

npm init

$ npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (node) timeForamt
version: (0.0.0) 0.0.1
description: An easy mongodb client for node.js based on native mongodb driver.
entry point: (index.js) 
test command: make test
git repository: https://github.com/summer7310/timeformat.git
keywords: timeformat 
author: summer7310 
license: (BSD-2-Clause) MIT

開發釋出npm module包
開發釋出npm module包

package.json檔案主要用來表述專案資訊的，包括名稱，版本，依賴，版權，git地址。

在資料夾下新建時間格式轉化功能指令碼入口檔案index.js

具體程式碼內容：

index.js

// 月(M)、日(d)、小時(h)、分(m)、秒(s)、季度(q) 可以用 1-2 個佔位符， 
// 年(y)可以用 1-4 個佔位符，毫秒(S)只能用 1 個佔位符(是 1-3 位的數字) 
function timeFormat(date, fmt) {

    var o = {
        "M+": date.getMonth() + 1, //月份 
        "d+": date.getDate(), //日 
        "h+": date.getHours(), //小時 
        "m+": date.getMinutes(), //分 
        "s+": date.getSeconds(), //秒 
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度 
        "S": date.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

exports.timeFormat = timeFormat;

每個元件包需要配一個測試檔案用於測試，新建test.js

test.js

var fn = require('./index.js');
var time = fn.timeFormat(new Date(), "yyyy-MM-dd");
console.log(time);

執行test

node test.js

輸出：

D:\npm_test\test>node test.js
2017-12-04

開發釋出npm module包

表示成功

2，釋出包至npm

在npm官網註冊賬號，https://www.npmjs.com

新增使用者，輸入完使用者名稱，密碼，郵箱後沒有錯誤資訊就完成了。

$ npm adduser
Username: your name
Password: your password
Email: (this IS public) your email

開發釋出npm module包

檢視當前使用者：

$npm whoami

顯示當前使用者名稱
釋出包

$ npm publish

開發釋出npm module包

發現報錯，使用者沒有許可權釋出該包，這時候去npm官網查一下，發現已經存在該名字的npm包,解決方法就是重新命名我們的元件名字，改名為timeFormatUtil

再次釋出，成功後我們去npm官網就能搜到該元件了
開發釋出npm module包
開發釋出npm module包

這裡大概再羅列一下發布過程中可能遇到的問題和解決方法。

Q1：

npm ERR! no_perms Private mode enable, only admin can publish this module:

這裡注意的是因為國內網路問題，許多小夥伴把npm的映象代理到淘寶或者別的地方了，這裡要設定回原來的映象。

npm config set registry=http://registry.npmjs.org

Q2：

npm ERR! you do not have permission to publish "your module name". Are you logged in as the correct user?

提示沒有許可權，其實就是你的module名在npm上已經被佔用啦，這時候你就去需要去npm搜尋你的模組名稱，如果搜尋不到，就可以用，並且把package.json裡的name修改過來，重新npm publish。

注意

每次修改元件需要重新發布都必須修改當前版本號，要不然npm會認為衝突。

3，下載使用元件

在專案中執行

npm install timeformatutil --save

開發釋出npm module包

執行測試檔案

const fn = require('timeformatutil');
let time = fn.timeFormat(new Date(), "yyyy-MM-dd");

console.log(time);

成功。

相關文章