实用Node.js，简单粗暴，新手学习的最短曲线
发布于 7 年前 作者 i5ting 16203 次浏览 来自 分享

https://github.com/dev-reading/practical-node-tutorial

实用Node.js，简单粗暴，新手学习的最短曲线

目录

  • 安装环境
  • 准备工作目录
  • 常用软件
  • 编辑器推荐VSCode
  • 学会VSCode调试
  • …

安装环境

3m安装法

  • nvm（node version manager）【需要使用npm安装，替代品是yrm（支持yarn）】
  • nrm（node registry manager）【需要使用npm安装，替代品是yrm（支持yarn）】
  • npm（node packages manager）【内置，替代品是n或nvs（对win也支持）】

nvm

node版本发布非常快，而且多版本共存可能性较大，推荐使用nvm来安装node

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash

$ echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc
$ echo '[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm' >> ~/.zshrc
$ source ~/.zshrc

$ nvm install 0.10
$ nvm install 4
$ nvm install 6
$ nvm install 8

nrm

https://registry.npmjs.com 是node官方的源（registry），服务器在国外，下载速度较慢，推荐安装nrm来切换源，国内的cnpm和taobao的源都非常快，当然，如果你想自建源也是支持的。

$ npm install --global nrm --registry=https://registry.npm.taobao.org
$ nrm use cnpm

npm

nrm切换完源之后，你安装npm模块的速度会更快。

$ npm install --global yarn

npm基本命令

名称 描述 简写
npm install xxx 安装xxx模块，但不记录到package.json里 npm i xxx
npm install --save xxx 安装xxx模块，并且记录到package.json里，字段对应的dependency，是产品环境必须依赖的模块 npm i -s xxx
npm install --save-de xxx 安装xxx模块，并且记录到package.json里，字段对应的dev-dependency，是开发环境必须依赖的模块，比如测试类的（mocha、chai、sinon、zombie、supertest等）都在 npm i -D xxx
npm install --global xxx 全局安装xxx模块，但不记录到package.json里，如果模块里package.json有bin配置，会自动链接，作为cli命令 npm i -g xxx

准备工作目录

我的工作目录一般是 ~/workspace/github

常用软件

  • 1）oh my zsh是我最习惯的shell，终端下非常好用

配合iterm2分屏 + spectacle全屏，几乎无敌

  • 2）brew是mac装软件非常好的方式，和apt-get、rpm等都非常类似

安装4个必备软件

  • brew install git 最流行的SCM源码版本控制软件

  • brew install wget 下载、扒站神器

  • brew install ack 搜索代码神器

  • brew install autojump 终端下多目录跳转神器

  • 3）vim

我虽然不算vim党，但也深爱着。janus是一个非常好用的vim集成开发环境。比如ctrl-p、nerdtree等插件都集成了，对我这种懒人足够了。

Vim

编辑器推荐VSCode

Visual Studio Code（以下简称vsc）

  • vsc是一个比较潮比较新的编辑器（跨平台Mac OS X、Windows和 Linux ）
  • vsc功能和textmate、sublime、notepad++，ultraedit等比较，毫不逊色
  • vsc尤其是在nodejs（调试）和typescript、go上支持尤其好
  • vsc提供了自定义 Debugger Adapter 和 VSCode Debug Protocol 从而实现自己的调试器

值得一学

下载安装VScode

  • 配置code命令
  • 配置快捷键
  • 安装vsconde-icons插件

配置code命令

Vscode Code

配置快捷键，最喜欢cmd + [1-5]，这和xcode习惯一直，非常棒

// 将键绑定放入此文件中以覆盖默认值
[
    { "key": "cmd+1",           "command": "workbench.view.explorer" },
    { "key": "cmd+2",           "command": "workbench.view.search" },
    { "key": "cmd+3",           "command": "workbench.view.scm" },
    { "key": "cmd+4",           "command": "workbench.view.debug" },
    { "key": "cmd+5",           "command": "workbench.view.extensions" }
]

安装vsconde-icons插件，对各种文件扩展都有icon显示，更直观

Vscode Icons

学会VSCode调试

express调试实例

这是我们最常用的调试

通过创建express项目构建，调试来演示vsc的具体用法

创建express项目

使用express-generator

➜  examples git:(master) ✗ express helloworld

   create : helloworld
   create : helloworld/package.json
   create : helloworld/app.js
   create : helloworld/public
   create : helloworld/public/javascripts
   create : helloworld/public/images
   create : helloworld/public/stylesheets
   create : helloworld/public/stylesheets/style.css
   create : helloworld/routes
   create : helloworld/routes/index.js
   create : helloworld/routes/users.js
   create : helloworld/views
   create : helloworld/views/index.jade
   create : helloworld/views/layout.jade
   create : helloworld/views/error.jade
   create : helloworld/bin
   create : helloworld/bin/www

   install dependencies:
     $ cd helloworld && npm install

   run the app:
     $ DEBUG=helloworld:* npm start

➜  examples git:(master) ✗ cd helloworld 
➜  helloworld git:(master) ✗ npm install
➜  helloworld git:(master) ✗ npm start

测试express项目是正常的。

说明：如果是自己的项目，需要自己构建git版本控制的，faq里有具体说明。

修改launch.json的内容

输入command + t快速定位文件：.vscode/launch.json

修改launch.json的内容

{
	"version": "0.1.0",
	// List of configurations. Add new configurations or edit existing ones.
	// ONLY "node" and "mono" are supported, change "type" to switch.
	"configurations": [
		{
			// Name of configuration; appears in the launch configuration drop down menu.
			"name": "Launch helloworld",
			// Type of configuration. Possible values: "node", "mono".
			"type": "node",
			// Workspace relative or absolute path to the program.
			"program": "examples/helloworld/bin/www",
			// Automatically stop program after launch.
			"stopOnEntry": false,
			// Command line arguments passed to the program.
			"args": [],
			// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
			"cwd": ".",
			// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
			"runtimeExecutable": null,
			// Optional arguments passed to the runtime executable.
			"runtimeArgs": ["--nolazy"],
			// Environment variables passed to the program.
			"env": {
				"NODE_ENV": "development"
			},
			// Use JavaScript source maps (if they exist).
			"sourceMaps": false,
			// If JavaScript source maps are enabled, the generated code is expected in this directory.
			"outDir": null
		},
		{
			"name": "Attach",
			"type": "node",
			// TCP/IP address. Default is "localhost".
			"address": "localhost",
			// Port to attach to.
			"port": 5858,
			"sourceMaps": false
		}
	]
}

核心内容

"name": "Launch helloworld",
"type": "node",
"program": "examples/helloworld/bin/www",

program是要执行的express的入口。

这里的helloworld是项目，所以找到/bin/www目录即可。

点击调试按钮

会弹出一个窗口，执行如下命令

cd '/Users/sang/workspace/github/vsc-doc'; env 'NODE_ENV=development'   'node' '--debug-brk=44412' '--nolazy' 'examples/helloworld/bin/www'
Debugger listening on port 44412

其实node-inspector也是这个原理的。

增加断点

此时访问

curl http://127.0.0.1:3200/

进入调试界面

和chrome的调试是一样的。

点击1）处按钮，打开控制台，配合调试，在控制台里查看对应的变量值

另外值得说明的是二级菜单里4个部分

  • a）variables变量
  • b）watch观察
  • c）call stack 调用栈
  • d）break points 断点

它和chrome的调试也是一样的，此处就不多讲了。

VSCode的其他调试方式

  • 当前文件
  • 附加到进程
  • 附加到远程服务器
  • 前端：推荐debugger for chrome插件
  • 其他语言调试

课后作业：亲手debug一次，感受一下vsc的魅力

更多

更多vsc用法，参见 https://github.com/i5ting/vsc

45 回复

然而我还是console

2

顶天猪大神

@ianchn 不知道你们真搞笑还是真分不清谁是狼叔谁是天猪

1

@ianchn 真是替你担心

入门到精通nodejs视频教程，要学的可以看看 http://www.sucaihuo.com/video/135.html

@hewentaowx @Mrlyjoutlook 我错了

1

这看着还是有点蒙

@dengnan123 我也是，感觉node不需要那么麻烦的调试，要不然还不如去学习java

一直在用vscode。我想咨询一下nvm。node不同版本直接兼容性很差吗。为什么会出现要支持不同版本，譬如java或者.net服务器也只会安装一个版本的framework或jre包。不会多版本切换呀。

★来自antd-cnode★

@FourLeafClover 有一些框架更新不及时，只能使用老版本， 但是开发其他项目的时候又想使用新的nodejs，这个时候就需要多版本了。 其实如果可以随意升级，不考虑老代码兼容的话，一个版本就够了，持续升级，爽爽的。 然而理想很美好，现实就。。。你懂得！

@jinyuyoulong 用docker？不同镜像里面使用不同版本node。

★来自antd-cnode★

这还短啊。。。

抓紧写书吧大佬，等着呢。

来自酷炫的 CNodeMD

要学的真多啊

加点 Node.js学习资料 ，学习还需多练啊。。

来自✨ Node.js开源项目精选✨

1

@FourLeafClover 一般项目立项确定技术架构时选当下最新LTS即可，如果有多个不同时期的项目，开发的时候用nvm 就很方便了。线上发布用docker比较方便，开发环境没必要docker，nvm更好用。

来自✨ Node.js开源项目精选✨

666

我不是按这路线的

@vendar 你这资料不行啊，都请求异常

@zhongshiji 哪个资料异常？我看看

来自✨ Node.js开源项目精选✨

1

@vendar 都像这样 image.png

1

@zhongshiji 感谢反馈！现在已经正常了。

来自✨ Node.js开源项目精选✨

我来看看

感觉Atom对Node.js的支持也蛮好的，小小的安利一下

努力学习中

node之路不平坦啊

我完全不是按这路线走的

每个人的路线都不同

@codeofking 你怎么走的？

@vendar 你在Mac上开发？

新手可以参考的

学的很辛苦

@whoknowme 今天前端的复杂度已经上去了。node也越来越好，慢慢适应吧

@chapgaga 是的，开发环境只用Mac和Linux

@vendar 每天带Mac本上班么？

@chapgaga 额。。开发用iMac，笔记本只是移动方便，偶尔外出使用。

来自✨ Node.js开源项目精选✨

表示刚参加了狼叔的知乎live 😁

👍🏻 自豪地采用 CNodeJS ionic

@djkloop 啥东西

感觉自己没救了，学的好差

这路线走了一下，感觉不是很适合我

国庆加班中，来逛逛

艰苦奋斗

牛批

对我来说不简单啊

回到顶部