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满意的点了点头。