工欲善其事，必先利其器

為什麼寫這篇文章？

因為我自己在剛接觸程式時最痛恨的就是環境設定
不知道是我跟電腦不合還是怎樣，每次我學新東西的時候總是在環境設定這個環節卡的不要不要的
為了避免讀者在之後實戰的文章中一邊看一邊心理罵:「為什麼我們程式一模一樣但我的就是會錯?」這樣的憾事發生，所以我決定詳細的說明這個專案所需安裝的一切環境，並附上我本機安裝的工具版本，讓大家在日後的文章中可以順利操作與學習

你們實際操作時通常都有新的版本了，如果最新版本有問題可以切換到筆者的版本來操作

需要安裝哪些工具

說明包含 windows/mac 兩個系統的設定

1. Node.js
2. NVM
3. git
4. yarn
5. VSCode

開發環境介紹 & 設定

1. Node.js 官網

能夠在 server 端運行 JavaScript 的開放原始碼、跨平台 JavaScript 的執行環境。前端工程師的福音

筆者安裝的版本：v16.19.1 (使用nvm安裝，後面會介紹)

2. nvm 官網

由於 Node.js 更新速度是非常快的，而許多套件有 Node.js 版本的相依性，透過NVM你可以輕鬆切換 Node.js 版本來符合不同專案的使用環境

windows 安裝步驟

1. 先進入windows下載頁面
2. 選擇最新版本的下載 nvm-setup.zip(筆者版本為1.1.7，你看到這篇文章時可能有提供更新的版本)

3. 下載後一路瘋狂下一步即可

4. 安裝後開啟命令提示字元(CMD)

5. 在 CMD 輸入指令確認 nvm 是否安裝成功

mac 安裝步驟

1. 打開終端機(Terminal)，以下步驟皆在終端機操作
2. mac 建議先下載 Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

3. 下載後安裝 nvm

brew install nvm

4. 在終端機輸入指令確認 nvm 是否安裝成功

用 NVM 安裝 node.js

• 指令：nvm install [version]
• 請切記要安裝一個 Node.js 版本(請選用LTS版本)，不然你寫的程式會沒有可以運行的環境

nvm install 16.19.1

筆者nvm安裝版本：0.39.3

3. git 官網

這是對於程式版本控制的工具，透過他你可以輕鬆回到過去，並且在多人協作時也能有效管控
windows下載頁面、mac下載頁面

我有朋友使用 windows 怎麼樣都無法正常安裝 git，如果你也遇到了這個不幸，你還是有Git桌面板可以選擇的

常用指令

• 抓取遠端數據庫(僅確認有什麼更新，不合併)

git fetch

• 抓取遠端數據庫更新

git pull

• 更新遠端數據庫

git push

筆者windows git安裝版本：2.27.0.windows.1

4. yarn

這是專門安裝套件的軟體，站在巨人的肩膀上你才能看得更遠，妥善運用別人提供的套件，程式的路能走得更遠
下載頁面

常用指令

• 依據 package.json 安裝所有套件

yarn

• 安裝到 dependencies

yarn add [package]

• 安裝到 devDependencies

yarn add [package] –save-dev

• 全域安裝套件(使該套件可在電腦任何位置被呼叫)

yarn global add [package]

筆者yarn安裝版本：1.19.2

5. VScode 官網

現在已經過了用記事本在打程式的年代了，透過 IDE(整合開發環境)可以大幅增加你撰寫程式的速度
VScode下載頁面

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

為什麼寫這篇文章？

我周圍有些人在面對需求時很喜歡寫一些市面上已經提供的套件而不是直接使用它，而且他們寫出來的套件 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

工欲善其事，必先利其器

為什麼寫這篇文章？

因為我自己在剛接觸程式時最痛恨的就是環境設定

不知道是我跟電腦不合還是怎樣，每次我學新東西的時候總是在環境設定這個環節卡的不要不要的

為了避免讀者在之後實戰的文章中一邊看一邊心理罵:「為什麼我們程式一模一樣但我的就是會錯?」這樣的憾事發生，所以我決定詳細的說明這個專案所需安裝的一切環境，並附上我本機安裝的工具版本，讓大家在日後的文章中可以順利操作與學習

你們實際操作時通常都有新的版本了，如果最新版本有問題可以切換到筆者的版本來操作

今日目標

1. 了解使用工具的重要性 & 為什麼選擇他
2. 完成開發前環境設定

使用什麼工具完成

說到爬蟲，我想絕大多數的人第一個想到的一定是 python，python 是一個很好的語言，但很可惜我對他的鑽研不夠深入，如果這份外包使用一個自己不夠熟悉的語言來撰寫那是一個不負責任的行為，所以在這裡我選擇的語言是 javacscript

另外我會詳細說明前置環境的設定，如果每個人的環境設置都不一樣，那麼我文章的程式可能在許多電腦上都是無法執行的，所以說明包含 windows/mac 兩個系統的設定，讓你們了解到為什麼叫使用這些工具

1. Node.js
2. NVM
3. git
4. yarn
5. VSCode

開發環境介紹 & 設定

1. Node.js 官網

能夠在 server 端運行 JavaScript 的開放原始碼、跨平台 JavaScript 的執行環境。前端工程師的福音

筆者安裝的版本：v12.19.0

2. nvm 官網

由於 Node.js 更新速度是非常快的，而許多套件有 Node.js 版本的相依性，透過NVM你可以輕鬆切換 Node.js 版本來符合不同專案的使用環境

• windows 安裝步驟

  1. 先進入windows下載頁面

  2. 選擇最新版本的下載 nvm-setup.zip(筆者版本為1.1.7，你看到這篇文章時可能有提供更新的版本)

     

  3. 下載後一路瘋狂下一步即可

  4. 安裝後開啟命令提示字元(CMD)

  5. 在 CMD 輸入指令確認 nvm 是否安裝成功

     nvm
     

     

• mac 安裝步驟

  1. 打開終端機(Terminal)，以下步驟皆在終端機操作

  2. mac 建議先下載 Homebrew

     /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
     

  3. 下載後安裝 nvm

     brew install nvm
     

  4. 確認 nvm 是否安裝成功

     nvm
     

     

• 常用指令

  • 安裝特定 Node.js 版本

    nvm install [version]
    

    請切記要安裝一個 Node.js 版本(請選用LTS版本)，不然你寫的程式會沒有可以運行的環境

    nvm install 12.19.0
    

  • 切換 Node.js 版本

    nvm use [version]
    

  • 列出本機(local)已經安裝好的 Node.js 版本

    nvm list
    

  • 顯示當下 Node.js 版本

    nvm current
    

  筆者安裝版本：1.1.7

3. git 官網

這是對於程式版本控制的工具，透過他你可以輕鬆回到過去，並且在多人協作時也能有效管控

windows下載頁面、mac下載頁面

我有朋友使用 windows 怎麼樣都無法正常安裝 git，如果你也遇到了這個不幸，你還是有Git桌面板可以選擇的

常用指令

• 抓取遠端數據庫(僅確認有什麼更新，不合併)

  git fetch
  

• 抓取遠端數據庫更新

  git pull
  

• 更新遠端數據庫

  git push
  

筆者windows安裝版本：2.27.0.windows.1

4. yarn 官網

這是專門安裝套件的軟體，站在巨人的肩膀上你才能看得更遠，妥善運用別人提供的套件，程式的路能走得更遠

windows下載頁面、mac下載頁面

常用指令

• 依據 package.json 安裝所有套件

  yarn
  

• 安裝到 dependencies

  yarn add [package]
  

• 安裝到 devDependencies

  yarn add [package] –save-dev
  

• 全域安裝套件(使該套件可在電腦任何位置被呼叫)

  yarn global add [package]
  

筆者安裝版本：1.19.2

5. VScode 官網

現在已經過了用記事本在打程式的年代了，透過 IDE(整合開發環境)可以大幅增加你撰寫程式的速度

VScode下載頁面

優點

1. 適合新手：不需在終端機(Terminal)安裝及設定各種前置作業，能節省建立開發環境的成本，並加速對開發環境的了解。
2. 執行程式：可以在 IDE 內直接執行一段程式碼，不需離開編輯器。
3. 程式碼高亮：將原始碼以不同顏色顯現，讓我們閱讀更方便。
4. 程式碼自動格式化：當輸入 if 或 while 時，他會自動縮排。
5. 版本控制方便：git add、git commit 有 GUI 可以操作，並且有 work tree 讓你比對自己更改了哪些地方
6. 功能擴充方便：能透過 Extentions 來安裝所需要的擴充的套件

常用快捷鍵

以下為 mac 快捷鍵，windows 按鍵請自行轉換：cmd = ctrl, option = alt

• 區塊註解 cmd + k + c
• 區塊取消註解 cmd + k + u
• 區塊縮退 cmd + [
• 區塊縮進 cmd + ]
• 自動整理程式碼 option + shift + f

今天對於專案的前置環境說明到這裡，如果環境設定上有什麼問題的話實屬正常，畢竟每個電腦的環境都有些許不同，可以先用 google 查詢看看喔～進入工程師的世界後stackoverflow會是你最好的朋友

筆者碎碎念

在文章的最後分享一個心態，無論是面對工作還是外包都一樣

在面試工作或是談外包時要先衡量一下自己的實力

如果你即將要面對的工作(外包)已經遠遠超過了你的能力範圍

強烈建議你拒絕這個機會，不要把工作(外包)當成是一個給你練習基礎的地方

你的同事跟業主會恨你的

尤其是外包，如果你的基礎不穩，運氣好你可能會做出一個貌似可以用的專案

但實際上這個專案充滿著你所不知道的漏洞

這塊我想只有實際在業界磨練過一段時間才能比較感同身受

參考資源

1. nvm：快速安裝、切換不同版本的 Node.js
2. 連猴子都懂的Git入門指南
3. Windows 10 安裝並使用 nvm 切換 NodeJS 版本
4. 一應俱全的整合開發環境IDE
5. 用Yarn取代npm加速開發

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

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

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

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