iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
1
Modern Web

還在想要買哪一堂線上課程嗎?培養看文件的習慣吧!用 MDN 文件學後端:NodeJS & MongooseDB系列 第 22

22日: Setting up a Node development environment ( 新增 dependencies 、 Development dependencies )

寫在前面

因為最近諸事不順, 發生寫好了存在電腦裡但忘記上去發文的悲劇。
可能這最後幾天都會寫得更簡短任性, 說好要慢慢補的剩餘部分, 我想先休息一下富堅一下

承上篇, 出處 , 有簡體版 , 進入後自行點選

用 NPM

NPM 是開發 Node app 的靈魂 , 它用來取得需要用來開發 、 測試 、 準備上線的 JS libraries 套件工具

Note: 對 Node 而言, Express 只是另一個需要由 NPM 安裝的套件, 接著記得在 code 裡面 require()

通常我們會以 " dependencies 型態 " 安裝套件, 這樣他會被記載在 package.json, 這個檔案列出所有被安裝的 dependencies , 會有名稱、 版號、 其他敘述、 initial file to execute( 這我不知道是啥 )、 production dependencies、 dev dependencies、 支援的 Node 版號 ... 。
package.json 應該要包含執行這個 app 所需要的所有套件 ( 如果要寫可重用的 library, 要把它上傳到 npm repository, 這樣網路上其他 user 才可以載下來, 參考資料: 如何發佈你的「包」到 NPM Repository 來源 SJ )
懶人結論: 就我的認知,它是方便給其他開發者參考有用到那些工具的文件然後可以「一鍵安裝」

新增 dependencies

以下步驟把 package 存到專案 dependencies 裡面, Node app 需要用到
Note: 這裡教怎麼安裝 Express package, 之後會有其他的以及 Express App Generator。 這個段落旨在了解 NPM 怎麼運作,還有 app generator 會建構出哪些東西

  1. 創建目錄, 拿來裝我們要做的 web app, 然後進去 ( 前面有先偷跑講過了 )
mkdir myapp
cd myapp
  1. npm init 建立 package.json 檔案。 這指令會啟動某些事, 包括 app 名字跟版數, 以及進入點檔案的名字, 預設是 index.js
$ npm init

如果把檔案開來看( $ cat package.json )會長這樣

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}
  1. 在 myapp 目錄下安裝存成 dependencies 的 Express
$ npm install express

Dependencies 段落會在文件的最下方:

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.4"
  }
}
  1. require() function 呼叫 Express library。 現在就在 myapp 目錄新增這個檔案, 貼上以下內容:
const express = require('express')
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!')
});

app.listen(8000, () => {
  console.log('Example app listening on port 8000!')
});

require() 引入 express module 來製造一個 server ( app )。 app.get() 只針對指定 URL path ('/') 回應 HTTP GET req

  1. 啟用 server
$ node index.js
Expample app listening on port 8000
  1. 去瀏覽器連哪個網址我已經不想再說了。 可以這樣一直 repeat、 一直 repeat 的嗎

Development dependencies

某一個 dependency 如果只有在開發階段用到, 那應該要存成 development dependency, 這樣 package user 就不用安裝在 production 裡面。 例如使用 JS Linting eslint , 應該要這樣安裝:

npm i eslint --save-dev

package.json 就會這樣記載

"devDependencies": {
    "eslint": "^4.12.1"
  }

Note: Linters 是規範型的工具, 監測在 coding 時有沒有遵從某些規範


上一篇
21日: Setting up a Node development environment ( Express 開發環境概覽、 安裝 、 測試安裝有沒有成功--比較讓人感到興奮的測試方式 )
下一篇
23日: Setting up a Node development environment ( Running tasks 、 安裝 Express App Generator 、 總結 )
系列文
還在想要買哪一堂線上課程嗎?培養看文件的習慣吧!用 MDN 文件學後端:NodeJS & MongooseDB30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2019-11-07 04:11:11

存在電腦裡但忘記上去發文的悲劇

明年再來!!!!

PeterLiao iT邦新手 4 級 ‧ 2019-11-07 07:38:41 檢舉

會哦,如果明年開賽的時候不忙的話;已經想好主題了,你也參加呀~

嘿嘿 正在選題目!!!!

我要留言

立即登入留言