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"
]
}

加入watch可以帮助你CompileOnSave。

然后在VSCode里Open这个工程目录。按Ctrl+Shift+B,选Configure Task Runner。

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

这样 ts->js 的配置就ok了。

tslint --init 来生成 tslint.json

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

别的都不动,把字符串改成默认单引号。这是Airbnb语法推荐的。

Files->Preferences->User Settings

{
"editor.tabSize": 2,
}

把tab改成2个空格。

---------------- 初战 --------------

把玩一下后,就赶紧找个敌人试试手吧。

一般来说,大家的第一个敌人不是地精就是狗头人……

-----  战斗前查怪物卡,是每一个立志砍翻一切敌人的家伙都会做的事情 -----

地精, 一级武者

小型类人生物 (地精类)
生命骰: 1d8+ ( hp)
先攻: +
速度: 30英尺 (6格)
防御等级: (+1体形, + 敏捷, + 皮甲, + 轻型盾牌),接触AC , 措手不及
基础攻击/擒抱: +/–
攻击: 钉头锤+ 近战 (1d6) 或标枪 +3远程 (1d4)
全回合攻击: 钉头锤+ 近战 (1d6) 或标枪 +3远程 (1d4)
占据/触及: 5英尺/ 英尺
特殊攻击: —
特殊能力: 黑暗视力60英尺
豁免: 强韧 +, 反射 +, 意志 –
属性: 力量11, 敏捷 , 体质 , 智力 , 感知 , 魅力
技能: 躲藏 +, 聍听+, 潜行+, 骑乘 +*,侦察 +
专长: 警觉
环境: 温带平原
组织: 小群(–), 一帮 (– 个个体加上相等数量的非战斗人员,加上每20个成年个体一个3级士官和一个4到6级领袖),战团 (– 个带着座狼), 或部落 (–400个个体加上相等数量的非战斗人员,加上每20个成年个体一个3级士官,1或2个4或5级副官,一个6~8级的领袖,~24只座狼加上2~4只凶暴狼)
挑战等级: /
宝藏: 标准
阵营: 通常是中立邪恶
进化: 根据人物职业 战斗:
地精是那么的弱小,以至于只能在被痛扁时发出"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');

F5后出现launch.json。把"program"调整成index.ts。把"sourceMaps"调整成true。

Run起来看看

C蛮的全栈之路-node篇(一) 环境布置

下一个断点看看。

C蛮的全栈之路-node篇(一) 环境布置

C蛮看着一个照面就倒在血泊中的Goblin满意的点了点头。

上一篇:关于bootstrap-datetimepicker 插件的配置参数详解


下一篇:使用element UI时,table表格插入input输入框后里面的内容无法编辑问题