C蠻的全棧之路-node篇(一) 環境佈置

目錄

C蠻的全棧之路-序章 技術棧選擇與全棧工程師
C蠻的全棧之路-node篇(一) 環境佈置
C蠻的全棧之路-node篇(二) 實戰一：自動發博客

---------------- 我是分割線 --------------

武器買到了，第一步就是拿在手裏掂量一下。

 

node.js 能夠去 https://nodejs.org/ 下載，或者先安裝npm（npm nrm nvm人稱3m），而後用npm安裝node。

IDE能夠選擇WebStorm。去 http://www.jetbrains.com/webstorm/ 下載。

IDE能夠選擇VSCode。去 https://code.visualstudio.com/download 下載。(我的推薦)

---------------- TypeScript or not-------------- 

爲何提到了TypeScript？

前面提到過工程化。

當你的js文件數增長，行數也在增長，參與人數也在增長時，工程漸漸變得不可維護。

所謂「動態類型一時爽，代碼重構火葬場」，古人誠不我欺。

在其餘技術棧的同窗嘲笑js系不能作大工程時，咱們要怎麼辦呢？

一種是守着ES的生態，配上Babel, ESLint, Flow這一類東西，標準。

另外一種就是直接上車用TypeScript，配上TSLint等一系列東西，而且VSCode也配合的很優雅。有輕度的侵入性。

當你在維護一個已有項目時，Flow系的改造是平滑的。當作一個新項目時，兩種方案均可以考量。最終這個選擇取決於團隊的構成。

---------------- TypeScript的場景--------------

npm install typescript -g

npm install tsd -g

npm install tslint -g

tsd install node

---------------- 非TypeScript的場景------------

npm i eslint -g

npm i babel -g

---------------- WebStorm --------------

WebStorm安裝後，File->Setting->Node.js and NPM 裏，把Code Assistance給Enable掉，這樣就有智能感知了。

此IDE能夠直接建立Express工程。node工程有智能感知，也能直接調試，算是比較方便的。

細節再也不贅述。

---------------- VSCode --------------

在工程目錄 tsc --init

生成了一個tsconfig.json文件：

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "outDir": "built",
        "rootDir": ".",
        "sourceMap": true,
        "watch" : true
    },
    "exclude": [
        "node_modules"
    ]
}

View Code

加入watch能夠幫助你CompileOnSave。

 

而後在VSCode裏Open這個工程目錄。按Ctrl+Shift+B，選Configure Task Runner。

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "silent",
    "args": ["-p", "."],
    "problemMatcher": "$tsc"
}

View Code

這樣 ts->js 的配置就ok了。

 

tslint --init 來生成 tslint.json

"quotemark": [
    true,
    "single"
],

View Code

別的都不動，把字符串改爲默認單引號。這是Airbnb語法推薦的。

 

Files->Preferences->User Settings

{
    "editor.tabSize": 2,
}

View Code

把tab改爲2個空格。

 

---------------- 初戰 --------------

把玩一下後，就趕忙找個敵人試試手吧。

通常來講，你們的第一個敵人不是地精就是狗頭人……

 

-----  戰鬥前查怪物卡，是每個立志砍翻一切敵人的傢伙都會作的事情 -----

地精, 一級武者

小型類人生物 (地精類)
生命骰: 1d8+1 (5 hp)
先攻: +1
速度: 30英尺 (6格)
防護等級: 15 (+1體形, +1 敏捷, +2 皮甲, +1 輕型盾牌),接觸AC 12, 措手不及 14
基礎攻擊/擒抱: +1/–3
攻擊: 釘頭錘+2 近戰 (1d6) 或標槍 +3遠程 (1d4)
全回合攻擊: 釘頭錘+2 近戰 (1d6) 或標槍 +3遠程 (1d4)
佔據/觸及: 5英尺/5 英尺
特殊攻擊： —
特殊能力: 黑暗視力60英尺
豁免: 強韌 +3, 反射 +1, 意志 –1
屬性: 力量11, 敏捷 13, 體質 12, 智力 10, 感知 9, 魅力 6
技能: 躲藏 +5, 聹聽+2, 潛行+5, 騎乘 +4*，偵察 +2
專長: 警覺
環境: 溫帶平原
組織: 小羣(4–9), 一幫 (10–100 個個體加上相等數量的非戰鬥人員，加上每20個成年個體一個3級士官和一個4到6級領袖),戰團 (10–24 個帶着座狼), 或部落 (40–400個個體加上相等數量的非戰鬥人員，加上每20個成年個體一個3級士官，1或2個4或5級副官，一個6~8級的領袖，10~24只座狼加上2~4只兇暴狼)
挑戰等級: 1/3
寶藏: 標準
陣營: 一般是中立邪惡
進化: 根據人物職業

戰鬥：
地精是那麼的弱小，以致於只能在被痛扁時發出"World! World!"的悲鳴。

地精

----------------------------------------------

 

每個新武器上都染滿了這種小傢伙的血跡。

此次咱們也絕不例外的選擇它。

 

index.ts裏以下砍出一記。

import * as http from 'http';

http.createServer(function (req, res) {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end('Hello Goblin');
}).listen(8080, '127.0.0.1');

View Code

F5後出現launch.json。把"program"調整成index.ts。把"sourceMaps"調整成true。

 

Run起來看看 

 

下一個斷點看看。

 

 

C蠻看着一個照面就倒在血泊中的Goblin滿意的點了點頭。