如果屠龍刀是系統贈送的武器，你為什麼要自己打造一個破鐵刀?

為什麼寫這篇文章？

我周圍有些人在面對需求時很喜歡寫一些市面上已經提供的套件而不是直接使用它，而且他們寫出來的套件 bug 通常比原版多很多…

以個人的開發經驗來說，有 97% 以上的套件我是看過說明文檔就去使用，只有 3% 會去看這份套件到底怎麼寫，會去看他怎麼寫的套件通常不是因為他寫的太好，而是他寫的很爛，因為 bug 影響到功能導致使用者需要去修正或者評估使用其他解法

請不要重複造輪子，人類的進步，大部分是繼承前人的知識繼續發展

EX：你需要了解怎麼使用電腦，但你不需要買材料自己做出一台電腦

這篇文章除了套件安裝跟版控外，我還能學到什麼?

我們身處在一個開源工具大爆炸的時代，每天都有無數個程式大神寫好套件公開在網路平台供大家使用，所以當我們想要做某些功能的時候我們可以先找找看有沒有好心的前輩們幫我們完成這些功能了

但同時正因為開源工具爆炸，我們面對的不是沒有工具而是工具太多不知道怎麼選，所以在了解套件的重要性後，更重要的是知道如何找出適合的套件

今日目標

1. 了解套件對專案幫助有多大
2. 如何找出適合的套件
3. 學會安裝套件，觀察安裝後目錄結構的變化
4. 學會控制套件版本範圍
5. 知道如何下關鍵字找工具

1. 套件對專案的幫助

身為一個工程師，比起撰寫一個新功能，我更多的時間在研究如何使用一個套件，下面舉例說明套件對於專案的幫助：

1. 能夠快速評估專案功能的可行性
2. 可以更準確預估每個功能的完成時間
3. 節省大量自己重頭寫功能的時間
4. 你可以更專心地維護自己寫的程式邏輯
5. 避免專案主程式肥大

2. 如何找出適合的套件

由於套件的資源實在是太多了，不管是大神還是新手都可以發布套件，這造成了套件本身的良莠不齊，我這裡提供幾個幫助你判斷套件是否符合需求以及套件品質的方法：

1. 我會先用下面幾個最基礎的指標來做判斷
   • 套件最後發布時間：太久沒維護的套件請謹慎選用
   • 每週下載次數：越多人下載的套件穩定性越高
   • 版本：一般來說 1.0.0 以前的版本通常穩定性上有疑慮，盡可能避免使用
2. 有時候你需要的功能有很多個套件可以完成，這時上面的指標便可成為我們選用的依據

   • 我們在提供 npm 套件的網頁搜尋 env 就出現了高達149頁的套件資源

     

   • 我們點開前兩個套件：env、dotenv來做比較，你就很清楚選哪個是比較有保障的了

     套件	env	dotenv
     最後發布時間	9 years ago	10 months ago
     每週下載次數	2,171	11,326,358
     版本	0.0.2	8.2.0

     

     

3. 你同時要關心該套件的 issues 數量，如果太多建議你點進去看看 open issues，因為有些套件很久沒維護了

   • 點擊 issues 的數字便可跳到 github 的頁面來看 open issues 與 closed issues 的數量

     

     

4. 先透過閱讀套件的文件來確認是否有你想要的功能

   • 通常在 npm 網頁裡面就會有套件的說明，但部分套件因為使用上相對複雜，詳細的使用方法會放在 Homepage 的連結，點擊後會導向更詳細的說明文件(也可能是套件官網)

     

     

5. 大部分的套件都有提供 sample code，建議把套件加入專案前先用 sample code 測試來確認這個套件是否符合你的需求

3. 安裝套件，觀察安裝後目錄結構的變化

在這裡我們以明天要講的主題 環境變數 為範例，在 Node.js 專案要讀取 .env 的資料需要安裝一個 dotenv 的套件來抓 .env 的資料，安裝套件時請輸入指令

yarn add dotenv

安裝完後你會發現專案目錄下多了一些東西

• node_modules 資料夾：他會儲存你所安裝的套件

• yarn.lock 檔案：為了保證在不同機器上能得到一樣的結果，所以需要這個檔案儲存每個相依性所安裝的確切的版本

  

• 同時 package.json 檔案內容也有變化

  • 你會發現在 dependencies 中多了你剛剛安裝的套件 dotenv 版本為 "^8.2.0"

    

4. 套件不是安裝完就沒事了，你得學會控制套件版本範圍

因為部分套件有版本相依性，所以你需要學會如何控制套件的版本，常見狀況如下：

• 套件更新到最新版本後壞掉是常有的事
• 有些套件甚至是在某個框架下只有某幾個版本能用

所以我們需要了解如何透過版號控制專案下的套件版本

1. 控制 package.json 裡面套件的版本
   版本格式：主版號.次版號.修訂號
   • 1.0.0.
     • 指定版本，限定只使用 1.0.0 版本
   • ^1.0.0
     • 可使用 >=1.0.0 且 <(1+1).0.0 的版本
     • 範例：
       • ^1.2.3 版本範圍 >=1.2.3 <2.0.0
       • ^0.2.3 版本範圍 >=0.2.3 <0.3.0
   • latest
     • 當前發布的版本，使用 npm install 所安裝的套件就是標記 latest 的版本
   • ~0.1.1
     • 可使用 >=0.1.1 且 <0.(1+1).0 的版本
     • 範例：
       • ~1.2.3 版本範圍 >=1.2.3 <1.3.0
       • ~0.2 版本範圍 >=0.2.0 <0.3.0
   • git://github.com/user/project.git#commit-ish
     • 直接使用 Git URL 的套件
2. 練習控制套件版本
   1. 打開專案 package.json，調整套件版本
   2. 在專案資料夾的終端機(Terminal)執行指令 yarn 安裝套件
   3. 在 yarn.lock 檔案觀察下載的套件版本是否正確

5. 如何下關鍵字找工具

我個人的找資料的方向是：

• 查官方資源提供的方法：因為通常資料及提供的方法最齊全
• 看網路資源：是否有前輩做過相同的事情並提供範例
• 查詢 npm 套件：有人已經將他的經驗無私的打包成套件讓大家直接使用了

在這我以本次的專案功能為例，我是以下面這些關鍵字來找需要的資源，通常用英文搜尋比較容易找到：

1. FB、IG爬蟲
   • 官方資源：FB api、IG api
   • 網路經驗：FB crawler、IG crawler
   • 換成更廣義的方式找工具：網頁爬蟲、web crawler
2. excel處理
   • 官方資源：excel api、google sheet api
   • 套件資源：excel npm、google sheet npm
3. 排程
   • 套件資源：cron npm
4. LINE通知
   • 官方資源：LINE api
   • 套件資源：LINE npm

基本上靠著這些關鍵字就能找出你所需要的資源了，我會先測試過些工具提供的 sample code 符合我的需求後才會正式接案，雖然多花了一份工，但卻可以保證你結案的穩定性；歡迎大家在下方留言分享自己找工具的方法喔～

參考資源

1. yarn.lock
2. package.json 套件版本控制
3. npm-semver

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

• 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
• 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
• 調整專案架構
  • 優化爬蟲程式，以更廣的視角來擷取網頁資訊
  • 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
  • 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

前幾天都在分享一些概念以及開發環境的設定，今天我們要正式開始寫程式惹～

在開始前我會建議你在github官網上面開一個帳號，這個網站是一個管理專案非常方便的工具，透過版本控管，你可以很清楚自己每天做了什麼事情，如果 commit 寫詳細一點會讓你未來想要復活某一個已經刪除的功能時有很大幫助(或是找出 bug 兇手時很有用XD)

昨天所提到 Clean Code 的議題是困擾工程師的日常，我每天也還在為了達到這些目標而努力，而想要掌握 Clean Code 最快的方法就是實戰，你實戰的經驗越多，你的程式也會越朝著 Clean Code 前進

今日目標

1. 建立 Node.js 專案

2. 在終端機下指令執行 Node.js

3. 認識 package.json

3.1 了解 package.json 各項參數的意義

3.2 善用 scipts(腳本) 來執行 Node.js

3.3 使用 license 保護自己的權益

1. 建立 Node.js 專案

1. 請你先建立好專案的資料夾，並使用 VScode 打開它

2. 接著新增一個 index.js 的檔案，內容如下

   function helloWorld () { // 創建函式
       const content = 'helloWorld' // 給變數內容
       console.log(content) // 用日誌將內容印出來
   }
   helloWorld() // 觸發
   

2. 在終端機下指令執行 Node.js

STEP1： 新增完檔案後打開終端機(Termial)如下圖

STEP2： 在專案資料夾的終端機(Terminal)輸入指令並按下 Enter 執行

node index.js

STEP3： 如果有印出 helloWorld 的字串那就代表你踏出成功的第一步了

3. 認識 package.json

他是一種描述專案的檔案，裡面包含你專案的各項資訊(名稱、描述、版本、作者、協議...)

在昨天的文章有提到不要重複造輪子，多使用別人已經完善的套件，一個專案除了你自己的程式外通常還需要大量引入其他人寫的程式套件，package.json 能幫助你管理這些套件的版本(明天文章會詳細說明)

• 初始化 package.json
  請打開終端機(terminal)輸入如下指令，輸入後系統會要求你填寫這個專案相關的參數(這些參數之後都可以修改)

  npm init
  

3.1 了解 package.json 各項參數的意義

真實的 package.json 不可以用 //來當備註喔，下面範例加上備註只是為了讓大家方便理解

{
    "name": "crawler",// 專案名稱，全部小寫，不允許空格
    "version": "0.0.1",// 須符合x.x.x的格式
    "description": "FB & IG 爬蟲30天鐵人文章",//專案描述
    "author": "dean lin",//作者名字
    "dependencies": {},//在正式環境中會用到的pacakge
    "devDependencies": {},//在開發、測試環境中會用到的pacakge
    "scripts": {},//你可以撰寫支援的command作爲腳本
    "main": "index.js",//入口檔案
    "license": "MIT"//專案協議
}

• 參數中的 scripts 能增加工作效率、license 關乎權益，這兩個在下方會特別介紹

3.2 善用 scripts(腳本) 執行程式

隨著專案的成長，執行程式需要輸入的指令會越來越複雜，但記住這些指令並且正確無誤的輸入實在太考驗人類的記憶力了；我們應該要善用 scripts 的功能，有了他我們可以把精力放在寫程式而不是浪費時間在記住、輸入指令上面

• 腳本結構

  {
      ...
      "scripts": {
          "script名稱": "你要執行的command(指令)",
          "script名稱2": "你要執行的command(指令)",
          ...
      },
      ...
  }
  

• 優點

  1. 透過 scripts 讓指令長度大幅縮減
  2. 可自定義多組 script 名稱，以處理不同的需求
  3. 可以在 package.json 裡面管理指令，再也不用特別開一個記事本來儲存了XD

• 筆者經驗範例
  下面是筆者前端網頁在 merge branch 時所需要下的指令，我想如果是人工來下應該會崩潰吧？

  • 執行內容：移除local端套件→重新安裝套件→更新套件→根據開發環境執行

    rm -rf node_modules package-lock.json .nuxt yarn.lock yarn-error.log && yarn && yarn upgrade && yarn dev
    

  • 但是改寫成腳本後你只需要輸入指令 yarn clean_start 就能執行嚕

    {
        ...
        "scripts": {
            "clean_start": "rm -rf node_modules package-lock.json .nuxt yarn.lock yarn-error.log && yarn && yarn upgrade && yarn dev"
        },
        ...
    }
    

• 撰寫本專案執行的 scripts

  • 我們實際在 package.json 增加一個 scripts，並用這個 scripts 讓終端機(Terminal)印出helloWorld

    {
        ...
        "scripts": {
            "start": "node index.js"
        },
        ...
    }
    

  • 使用 npm 執行 scripts

    npm start
    

  • 如果你有乖乖安裝 yarn 的環境，也可以用它執行喔

    yarn start
    

  未來隨著專案成長 scripts 也會隨著需求改寫，就讓我們跟著專案一起做中學吧～

3.2 使用 license 保護自己的權益

我想應該不少人建立 package.json 時都是不停按下一步使用默認參數，但如果你正在開發一個商業用專案，卻把這份專案的 license 設定成 BSD 這類可以讓其他人改寫甚至商業化的 license 就搞笑了

選擇 license 前請了解他的作用範圍，因為他會影響到這份專案的使用權益

• 依據流程圖釐清自己的需求來做選擇，圖片來源

  

• 用表格看是否符合需求，表格來源

  條款	GPL	LGPL	BSD	APACHE	MIT
  公開原始碼	✓	✓
  以同樣方式授權	✓	✓
  標註修改的部分	✓	✓		✓
  必須包含 Copyright	✓	✓	✓	✓	✓
  必須包含 License	✓	✓		✓	✓

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔

如果大家對於文章的內容有任何想法歡迎討論，希望這篇文章有給正在學習程式的人一些幫助與方向

參考資源

1. 開始使用 GitHub， 註冊與建立repo
2. Choose an open source license
3. 常見的五個開源專案授權條款，使用軟體更自由
4. 在開源時代的興起下，如何透過License共享並保有權益
5. 如何使用 npm script 變成你的建立工具

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

• 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
• 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
• 調整專案架構
  • 優化爬蟲程式，以更廣的視角來擷取網頁資訊
  • 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
  • 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008