Node.JS學習筆記(二)_npm套件指令簡單介紹_Express框架的使用

Node.JS學習筆記(二)_npm套件指令簡單介紹_Express框架的使用_pug(哈巴狗)的前身jade(玉石)

- 1月 06, 2021

https://nypost.com/2020/04/30/vet-warns-pugs-could-be-more-susceptible-to-getting-coronavirus/

NodeJs 時常搭配的開發框架 Express

官方網站:

https://expressjs.com/

在目錄下執行命令

npm install -g express

任一透過 npm安裝的套件

若是直接 npm install <package name>

只會在目前專案目錄下安置

但若是用npm install -g <package name>

則代表全域安裝的意思換言之，就是直接安裝在自己的電腦上，

而不單單專案資料夾。

以Windows 作業系統為例

預設會在如下路徑

C:\Users\<your-windows-username>\AppData\Roaming\npm

NPM 是 Node Package Manager 的簡稱，它是一個線上套件庫

可把其想成.net 的nuget

若要卸載Global Install的Package

則下npm uninstall -g <package-name> 即可

此時會發現

C:\Users\<your-windows-username>\AppData\Roaming\

下npm已經不見

那官方介紹的安裝方式

npm install express --save

這個安裝指令又有捨麼差異

npm install <package> --save

是指By單一專案的安裝

--save 的option意思是安裝在專案目錄下只要有先做 npm init ，

加入--save 之後就會自動把Package相關資訊安置進 package.json 中。

先來看看如果只執行

npm install <package>

npm install 執行完後，可以在 node_modules 中看到所有依賴的package。

比如像是

body-parser

https://www.npmjs.com/package/body-parser

或是cookie

https://www.npmjs.com/package/cookie

這些都是可以單獨npm install 的套件

express已經自動幫我們封裝統一下載了

Running npm install <package-name>

will install that package only, and will not add the package to the dependencies list in package.json

Running npm install <package-name> --save

will install that package only, and will add the package to the dependencies list.

有無加--save差別只在於會不會幫你添加到pckage.json相依列表中

事實上自npm5之後可以省略--save參數

預設都會加到dependencies list當中

在做完npm install後

要再執行npm init 將專案進行初始化

這裡我先寫一個測試express的小程式

剛剛命名的index.js

var express = require('express');

var app = express();

app.listen(3000,function(){
	console.log('Listening on port 3000');
})

執行它就會開始server程式的常駐

node {js檔案}.js

這裡我們要再裝額外的套件

就要自己到package.json引入

目前的json只有引入express套件

{
  "name": "express_app1",
  "version": "1.0.0",
  "description": "express test",
  "main": "index.js",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ky",
  "license": "ISC"
}

編寫額外套件名稱到相依性區塊

{
  "name": "express_app1",
  "version": "1.0.0",
  "description": "express test",
  "main": "index.js",
  "dependencies": {
    "express": "^4.17.1",
    "body-parser": "*",
    "pug": "*",
    "nodemailer": "*"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ky",
  "license": "ISC"
}

存檔後再次執行npm install

這樣就是套件都完成配置並無錯誤的顯示

有錯誤的顯示會長這樣(有紅色且vulnerabilities數量非0)

https://coolmandiary.blogspot.com/2021/01/nodejsfound-4-vulnerabilities-3-low-1.html

成功引入了後就要來載入各個套件

require 把相關的東西import到js檔案中

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var nodemailer = require('nodemailer');

var app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

app.listen(3000);
console.log('Server is running on port 3000...');

我們希望能夠用一個導入到HomePage的Route

出現了Cannot Get的資訊....

原因在於尚未創建對應網站跟目錄HomePage的route

這裡補上打印Hello world字串訊息的程式

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var nodemailer = require('nodemailer');

var app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

app.get('/', function(req, res){
	res.send('<h1>Hello World</h1>');
});

app.listen(3000);
console.log('Server is running on port 3000...');

就可以正常打印出文字資訊

上述我們透過node.js 可以簡單創建出一個web server

使用 express_generator 來迅速建立網頁

指令:

npm install -g express-generator

產生網頁對應框架子目錄

express sample1

(可以看到express指令預設就幫我們建好package.json所以待會不需要再多一步npm init)

移動到該目錄下方

cd sample1

進行相依的package安裝

(由於sampl1子目錄自動生成的package.json檔案紀載有相依的module需要安裝)

npm install

讓node.js去執行node ./bin/www打開網頁server

npm start

此段指令是預設於package.json中會幫我們自然產生的

定義在scipts中

從上面cmd輸出可知道，node進入的點是./bin/www這個檔案，

www檔案中定義了網址的port為3000，並產生http server

www檔案預設產生的程式內容

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('sample1:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}