tags: ItIron2022 Javascript

前言

在開發的過程中我們經常用到大大小小的套件，讓我們不用每次都自己從造起，而是能直接站在巨人的肩膀上看風景！ 實際上打造並發布一個套件一點都不困難，你甚至不需要去寫很複雜的東西，只要能幫助自己或他人更輕鬆一點就是個好套件，今天就讓我們一起來實踐幾個常見的功能並做成套件發布吧！

預期成果

我們今天的目標很簡單，就是將我寫的以下幾個常見的功能發布成一個套件並實際安裝使用看看，這次要發布的常見功能如下，你也可以自己加入一些你覺得實用的函數，這次的重點在於發布的過程

// snake case轉為camel case
console.log(snakeToCamel('snake_case_to_camel_case')) // snakeCaseToCamelCase

// camel case轉為snake case
console.log(camelToSnake('camelCaseToSnakeCase')) // camel_case_to_snake_case


// 取最大公因數
console.log(getGCD(15,24)) // 3
console.log(getGCD(18,9)) // 9


// 取最小公倍數
console.log(getLCM(6,15)) // 30
console.log(getLCM(31,6)) // 186

const a = []
const b = {}
const c = () => ''

// 判斷是否是物件
console.log(isObject(a)) // false 
console.log(isObject(b)) // true
console.log(isObject(c)) // false

// 判斷是否是陣列
console.log(isArray(a)) // true 
console.log(isArray(b)) // false
console.log(isArray(c)) // false

Getting started

Step1: 建立npm帳號

npm是指node package manager，是一個供開發者們上傳自己套件的平台，從今天開始你也將是其中的一份子 :D

首先請你到官方網站註冊一個帳號，建立完成後需要去註冊的信箱做開通。

Step2: 在終端機登入帳號

接著請你打開電腦終端機，假設你是用vscode的話也可以用vscode本身的終端機，並在指令列輸入npm login，會出現提示要你輸入使用者名稱、密碼與信箱，若你有額外設定登入防護的話還會要求輸入一次信密碼，如下圖

登入成功後你則會看到這樣的訊息，接著就可進行下一步了

Logged in as 使用者名稱 on https://registry.npmjs.org/.

Step3: 建立開始檔案

我們要上傳套件需要符合npm要求的格式，因此我們可以先透過指令建立最初始的檔案，請你在命令行輸入以下的指令

npm init -y

其中-y表示默認所有的預設行為，這樣我們就不需要一個一個去同意！ 作為示範套件的話預設行為就完全足夠了。
輸入後你的專案資料夾內會出現一個package.json的檔案並有著以下的內容

{
  "name": "utils" // 資料夾名稱,
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

還記得我們以前寫chrome插件時有個manifest.json檔案嗎？ 你可以將package.json視為同樣的概念，它會告訴npm所有有關這個套件/專案的資訊，理解後請你將檔案內容修正為以下的內容

{
  "name": "@windate3411/utils-demo",
  "version": "1.0.0",
  "description": "Is's a demo package that consist of some useful functions.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "utils",
    "snakify",
    "camelize",
    "isObject"
  ],
  "author": "windate3411",
  "license": "ISC"
}

package.json內有幾個重要的欄位(*表示必填)，以下做簡單的說明

• name(*) :即將發布的套件名稱，注意我這邊名稱的開頭是@windate3411，這表示我發布時會在我的使用者名稱之下(scoped)，這樣的作法可以避免套件名稱與他人上傳的重複，但同時這樣做需要再等等的發布時修改一下對應的指令。
• version(*):這個套件的版本，三個點分別是主要版本號(major)、次要版本號(minor)以及更新版本號(patch)
• description:關於這個套件的描述。
• main: 你套件執行檔案的位置。
• keywords: 這個套件的關鍵字詞，有助於別人找到你的套件。
• license : 讓別人知道什麼樣的情況可以使用這個套件，可以參照這裡去做選擇。

Step4: 建立index.js檔案

接著我們就可以開始將那些函數寫進index.js檔案準備發布囉，請你先建立一個js檔案並寫入以下的程式碼

function snakeToCamel(str) {
    return str.replace(/((_)[a-z])/g, (group) => group[1].toUpperCase())
}

function camelToSnake(str) {
    return str.replace(/([A-Z])/g, "_$1").toLowerCase()
}

function getGCD(a, b) { // 取最大公因數
    if (a === 0) return b
    return getGCD(b % a, a)
}

function getLCM(a, b) { // 取最小公倍數
    return a * b / getGCD(a, b)
}

function isObject(obj) {
    return obj === Object(obj) && !Array.isArray(obj) && typeof obj !== 'function';
}

function isArray(obj) {
    return Array.isArray(obj);
}

export default {
  snakeToCamel,
  camelToSnake,
  getGCD,
  getLCM,
  isObject,
  isArray,
};

Step6: 撰寫簡單的Readme檔案

一個好的套件需要有良好的文件讓使用者能快速看懂你的套件是做什麼的、要怎麼用，因此我們這邊也需要建立個簡單的說明檔案，請你在專案目錄下新增一個Readme.md檔案並寫入一些基本的的內容，例如像是這樣

Step6: 發布套件

最後一步就簡單了！ 請你在命令行輸入以下的程式碼

npm publish --access=public

加入--access=public是因為我們之前在設定套件名稱時是掛在我們自己的scope下，因此在發布時要另外加入指令讓它知道這個套件是要公開的！ 發布成功後你會看到以下的訊息，同時你切到npm帳號的頁面也可以看到自己剛發佈的package囉！

+ @windate3411/utils-demo@1.0.0

總結

我們今天快速的帶過如何自己發布一個套件，跟做擴充套件一樣其實一點也不難，現在你知道你有能力發布東西了，之後要是做了什麼作品就可以選擇與他人分享，開源社群的參與對於未來職涯都是很好的加分項！ 我這邊只是給你個敲門磚，剩下的還是要看你自己囉！

文章中的範例程式碼可以在這邊取得，歡迎自行取用

轉職Q & A

Danny，我在談offer時對方都會跟我說他們公司保證多少個月年終，這種事情是真的嗎？

這類的問題也很常見，並不僅適用於工程師求職而已。我的經驗是「只要不是白紙黑字寫下的東西都當作沒有」，也就是說沒寫在合約內的東西你並不應該全盤相信，同樣的在沒有真的收到offer前也不要太興奮，這年頭連寫好的offer都能單方面毀約，更何況很多人只是"口頭"收到offer。 你或許會覺得這樣也把世界想得太悲觀了一些，但我是認為凡事都應該要小心一點 :D

與其聽HR單方面的說明，不如試著去找實際有在該公司工作的朋友問問情況，台灣的軟體工程師圈子真的非常小，你願意的話幾乎都會有相應的資訊可以取得，窮盡你手邊一切可利用的資源去協助你做最後的決策會是我比較推薦的做法！

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!