目的

我最近參考

[線上讀書會] 默司主講 vs code editor 實用入門 part2

來學習 VScode 的相關用法，從一開始4:00基本設置到24:53的網頁顯示，過程都有照默司大大的方式去下code，想要默司大大的方式去建置一個初始頁面。

使用的工具

系統: win10 IDE: VScode 1.22.2 node 8.9.3 npm 5.6.0 express 4.16.3 terminal cmder

操作流程

package.json如下

{
  "name": "ts_test01",
  "version": "1.0.0",
  "description": "",
  "main": "dist/main.js",
  "scripts": {
    "start": "node ./dist/main.js",
    "build": "tsc",
    "nodemon": "nodemon",
    "serve": "tsc -w & nodemon"
  },
  "keywords": [],
  "author": "leadingtw<leadingtw@gmail.com>",
  "license": "ISC",
  "private": true,
  "dependencies": {
    "body-parser": "^1.18.2",
    "cookie-parser": "^1.4.3",
    "express": "^4.16.3"
  },
  "devDependencies": {
    "@types/body-parser": "^1.16.8",
    "@types/cookie-parser": "^1.4.1",
    "@types/express": "^4.11.1",
    "@types/node": "^9.6.5",
    "nodemon": "^1.17.3",
    "typescript": "^2.8.1"
  }
}

指令 => npm run build npm start

遇到的問題

terminal 上有正確顯示

==========================
Server is listen : 3000
==========================

只是在網頁上輸入[127.0.0.1:3000]或是[localhost:3000] 他都一直跑圈圈後面直接顯示[無法連上這個網站] 按F12也沒有資訊 terminal 上除了顯示上面那一段之後完全沒動靜也可以正常[^c]退出

嘗試過的解法

cmder換成win10內建cmd或是用管理員開啟狀況也是一樣換成筆電開也不行重開一個檔案照著express官網上做就能夠連線或是開我之前沒用TypeScript建的express專案也能開啟換瀏覽器也不行功力還沒到不知道還能用那些方式測試除錯 VScode的Debugging也還不太會用這種情況也不知道要下哪寫關鍵字去stackoverflow查詢查也查不到相似的問題...... 希望各位大神能給小弟我一點方向或是關鍵字感謝~~ 現在我剩下唯一的思考方向就是影片的版本過舊導致我無法正常運作囧RZ

程式碼

/src/app.ts

import express = require("express");
import body = require("body-parser");
import cookie = require("cookie-parser");

let app = express();

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

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

export default app;

/src/main.ts

import http = require('http');
import app from './app';

let server = http.createServer(app);
let port = process.env.PORT || '3000';

server.on('error', (error) => {
    console.log(error);
})

server.listen(port, () => {
    console.log('==========================');
    console.log(`Server is listen : ${port}`);
    console.log('==========================');
});

/tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "sourceMap": true,
        "rootDir": "src",
        "outDir": "dist"
    },
    "exclude": [
        "node_modules"
    ]
}

/.vscode/tasks.json

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            "isBuildCommand": true,
            "args": [
                "run", "build"
            ]
        },
        {
            "taskName": "serve",
            "args": [
                "run", "serve"
            ]
        }
    ]
}

terminal 顯示

> ts_test01@1.0.0 start C:\Users\leadi\Documents\Gitub\TestAndLearnSpace\ts_test01
> node ./dist/main.js

==========================
Server is listen : 3000
==========================

nodejs-tw / ama

express server 無法連線 #32

目的

使用的工具

操作流程

遇到的問題

嘗試過的解法

程式碼