Skip to content

2.起步.md

Latest commit

 

History

History
443 lines (315 loc) · 14.2 KB

2.起步.md

File metadata and controls

443 lines (315 loc) · 14.2 KB
Raw

起步

安装 Node.js

Node.js 版本

  • LTS （长期支持版本 稳定，适用于生产）
  • Current （尝鲜版本）

Node.js 版本比较多，但是众多版本中，通常奇数版本都是 Current 版本（v.5.x、v.9.x、v.11.x）偶数版本通常是 LTS 版本（v.6.x、v.8.x、v.10.x）

普通安装

  • 下载软件安装
  • 使用 apt-get[ubuntu]、yum[centOS]、homebrew[macOS]等安装软件

这种方式安装，每次更新 Node.js 的版本，都需要从官网下载，并且进行覆盖安装。而且，在系统中只能存在一个版本的 Node.js ，不适合对比学习。

3m 安装

使用 3m 安装的原因：

  • Node.js 版本更新过快，版本多，同台机子需要多个版本
  • Node.js 内置的 npm 版本有差异
  • 国内访问 npmjs.org 镜像的速度慢

nvm（node version manager）[版本管理]

用于开发阶段，解决多版本共存、切换、测试等问题的外部 shell 脚本。nvm 不支持 windows， window 使用 nvmw。

特点：

  • 安装方便
  • 可以随意切换需要安装的 Node.js 版本
  • 还可以免除安装权限，通过 nvm 命令安装的 Node.js 位于用户目录下，而非系统目录下
  • 在 npm 安装全局模块的时候，可以避免除操作系统超级用户授权问题。[常见 linux 系统的权限问题]
nvm linux 安装
  • 安装下载
    # 需要git
    # 版本哪里根据实际情况
    $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
    # 通过 curl 下载执行 install.sh 脚本

运行结果后见到控制台：

    => Appending nvm source string to /Users/mcdowell/.bash_profile
    => bash_completion source string already in /Users/mcdowell/.bash_profile
    # 执行后 放在 /Users/mcdowell/.bash_profile路径下
  • 确认信息 先通过 cat 查看下确认信息，类似示例
    xport NVM_DIR="/Users/mcdowell/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
  • 生效环境变量
  #
    $ source /Users/mcdowell/.bash_profile
  • 修改下载源 nvm 默认是从 http://nodejs.org/dist/ 下载的, 国外服务器, 必然很慢, 好在 nvm 以及支持从镜像服务器下载包, 于是我们可以方便地从淘宝的 node dist 镜像下载：
  #
    $ NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node nvm install 4

如果你不想每次都输入环境变量 NVM_NODEJS_ORG_MIRROR, 建议加入到 .bashrc 文件中:

    # nvm
    export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
    $ source /Users/mcdowell/.bash_profile
windows 安装 nvm
nvm 和 nodejs 安装使用
使用

常用 nvm 命令

  • 安装：nvm install < node 版本号 >
  • 设置系统默认的 Node.js 版本：nvm alias default < node 版本号>
  • 切换版本：nvm use < node 版本号 >
  • 列出当前的本地版本：nvm ls
  • 列出远端可安装版本：nvm ls-remote
  • 一键安装全局模块：nvm reinstall-packages

参考：安装详细步骤

npm（node package manager）[包管理]

解决 Node.js 模块安装问题，其本身也是一个 Node.js 模块，每次安装都会内置某个版本的 npm。

安装 npm
  • npm v2：典型的树形依赖，层次深，依赖重叠，安装时间长，但相对更清晰。
  • npm v3：扁平化依赖，将依赖移到了顶层，同一模块多版本依赖时需采用 npm v2 模式，由于 Node.js 项目模块依赖非常多，因此在查找依赖时特别麻烦，虽没有 npm v2 用起来体验好，但下载速度确实快了不少。
  • npm v5：自动记录依赖树，下载使用强校验，重写缓存系统等功能得到了升级和改造。代表性特征是新增了 package-lock.json 文件，在操作依赖时默认生成，用于记录和锁定依赖树的信息，与 Yarn 类似。
升级 npm
  # 查看版本
  $ npm -v
  # 升级到对应版本
  $ [sudo] npm install -g npm[@版本号] # sudo 可选

  # eg: 在遇到使用问题的时候，一定要先查看版本，适当升级或降级是十分必要的
  $ [sudo] npm install -g npm[@6.11]
使用 npm 安装模块

npm 的包安装是最核心的功能，分为本地安装（local）【没-g】、全局安装（global）【有-g】两种。

  • 使用说明
  # 查看npm install 使用帮助
  $ npm -h install

  # 将模块安装到本地 node_modules目录下，但不保存到 package.json
  $ npm install [ pkg包名[@版本] ] # 包名缺省 自动按照 package.json 进行安装

  $ npm install --save
  $ npm i --save # 缩写

  # 将模块安装到本地 node_modules目录下，但不保存到 package.json 里的 dependencies
  $ npm install --save-prod # 安装依赖 [要在生产环境下使用该依赖]
  $ npm install -P # 简写

  # 将模块安装到本地 node_modules目录下，但不保存到 package.json 里的 devDependencies
  $ npm install --save-dev # 安装 开发依赖 [仅在开发环境使用该依赖]
  $ npm install -D # 简写

  # 安装全局模块 如果是命令行模块，直接连接到环境变量里【如npm、@vue/cli】
  $ npm install --global # 安装 开发依赖 [仅在开发环境使用该依赖]
  $ npm install -g # 简写
  • 关于本地安装
  1. 将安装包放在 node_modules（运行 npm 命令时所在的目录）下，如果没有 node_modules 目录，则会在目录下生成。
  2. 通过 require（）来引入本地安装的包，无须指定第三方包路径。
  • 关于全局安装
  1. 如果不是使用 nvm 安装的，安装包将放在/usr/local 【windows 在 C:\Users\主机名\AppData\Roaming\npm\node_modules】下，安装全局模块需要超级用户授权。
  2. 如果是使用 nvm 安装的，则需要将安装包放到用户目录的 nvm 版本对应的 bin 目录 ～/.nvm/versions/node/v6.0.0/bin/下，一般用户对于用户目录下的所有文件拥有完整权限，所以不需要增加 sudo 授权。
  3. 不能通过 require（）来引入本地安装的包。

nrm（node registry manager）[源管理]

解决 npm 镜像访问慢的问题，提供测速、切换下载源（registry）功能。

安装 nrm
  # nrm 本身是node.js 模块 也是通过 npm 进行安装的

  $ npm install -g nrm
nrm 常用命令
  # 查看 帮助信息
  $ nrm -h

  # 测速 显示个安装源 延迟 推荐 cnpm or taobao
  $ nrm test

  # 查看源 地址 *标识当前源
  $ nrm ls

  # 切换源
  $ nrm use <registry name>
  # eg
  $ nrm use cnpm

  # 增加自定义源源
  $ nrm add yourcompany http://registry.npm.yourcompany.com/

从源码 编译

Ubuntu 安装 g++ 依赖

  #
  $ sudo apt-get install g++ curl libssl-dev apache2-utils git-core build-essential

windows 安装 gcc

下载源码并编译

  #
  $ git clont https://github.com/nodejs/node.git
  $ cd node
  $ ./configure
  $ make
  $ sudo make install

开始

执行脚本

  #
  $ node <fileName>

遵循 CommonJS 规范

创建模块

'use strict'
/* 使用 module.export 定义模块 */
module.exports = function() {
  console.log('Hello CommonJS！: module.exports 定义，require 引入')
}

引用模块

'use strict'
/* 使用 require 引用 模块 ，使用 CommonJS规范 */
const hello = require('./1.2.modules')

hello()

编辑器与调试

编程有三等境界：

  • 打日志：可用 console.log、debug 模块或 Node.js SDK 内置的 util.log 等方式。
  • 断点调试：可用 Node debugger 或 VSCode 编辑器。
  • 测试驱动开发：TDD 和 BDD 测试框架非常多，比如 Mocha、AVA、Jest、Cucumber 等。

VScode

安装code 命令

  • macOS 下安装
  1. Command Palette（⇧⌘P）输入「 Shell Command: Install 『code』 command in PATH 」。
  2. 重启终端，这样就可以使用 code 命令了。在任意目录里键入 code 就可以轻松打开该目录下的所有文件。

常用快捷键

< ⌃ + ⌘ + Space > # 选择符号（包含技术符号 ⌘⌥⌃⇧⎋等）

< ⇧ + ⌘ + E > # 进入资源管理器 < ⇧ + ⌘ + F > # 进入搜索 < ⌃ + ⌘ + G > # 进入版本控制 < ⇧ + ⌘ + D > # 进入调试debug < ⇧ + ⌘ + X > # 进入扩展 < ⇧ + ⌘ + U > # 进入输出 < ⇧ + ⌘ + Y > # 进入调试控制台

< ⌘ + P > # 显示命令面板 （ 跳转文件 输入> 后，进入命令模式 ） < ⌘ + J > # 显示面板

调试

前端项目调试

在 VS Code 中调试VUE

Visual Studio Code 前端调试不完全指南 VSCode配置 Debugger for Chrome插件

Node项目调试

单个文件调试（launch）

1.code命令运行文件 如：< $ code src/study/2.2.HelloNode.js/hello_http.js > 或 手动打开文件，打开调试面板 2.设置断点【 点亮对应行数的小红点 】, F5 启动调试 3.浏览器访问 或者 curl 发送请求 【 如出现选择提示，选择Node 】 4.出现断点停留，开始调试

关于 launch.json program 要指定到具体执行文件。 【默认配置指向 程序 app.js 可能无法 进入debugger 模式】具体要根据自己项目情况，进行配置

如： 我要调试 src/study/2.2.HelloNode.js/hello_http.js

  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      # 此种方式为指定 单个文件 调试
      # 默认值为： "program": "${workspaceFolder}/app.js"
      "program": "${workspaceFolder}/src/study/2.2.HelloNode.js/hello_http.js"
    }
  ]

固定文件调试（launch）

  1. code 命令 打开调试文件夹 如：< $ code src/study/2.2.HelloNode >
  2. 打开调试面板，添加配置,进入launch.json,选择右下角 添加配置 可以选择预制配置。
  3. 打开你需要调试的文件 （调试的文件在当前编辑视图）, 进入debugger tab选项 F5 开始调试。

launch.json 配置

  "configurations": [
    {
      "type": "node",
      # 本地启动调试
      "request": "launch",
      "name": "Launch Program",
      # 此种方式为指定 固定文件 调试
      # 对当前所打开的 文件 进行调试
      "program": "${file}"
    }
  ]
常用调试方法

狼书-常用调试方法

跨进程调试(attach)

launch.json 的配置项中，request 通常 有launch 和 attach 两个选项，对应着两种调试模块，具体如下。

  • launch：启动程序，相当于直接在编辑器里启动 Node.js，即本地调试。
  • attach：附加到进程，在编辑器外通过 node --debug 命令启动，然后附加到 debug 进程中，即远程调试。

launch.json 配置

"configurations": [
  {
      "type": "node",
      "request": "attach",
      "name": "Attach",
      "port": 9229
  },
  # 或者
  {
     "type": "node",
     "request": "attach",
     "name": "Attach by Process ID",
     "processId": "${command:PickProcess}"
  }
]
  1. launch.json中添加配置 选择node attach
  2. 给要调试的点加上断点
  3. F5启动调试

如果看到调试按钮最右边有一个像电插销一样的按钮，就表示已经和远程 Node.js 线程连接成功了，剩下的就和本地调试一样了。

注意不同实际情况可能对应不同端口

远程调试

在某些情况下可能需要对远程的服务器进行调试，这时只能使用远程调试方式。远程调试的配置和跨进程调试类似.

launch方式 的配置 里增加 address 等对远程机器的配置信息，如下。【当然可以通过添加配置，来选择 node：附加到远程】

launch.json 配置

  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Remote",
      "address": "TCP/IP address of process to be debugged",
      "port": 9229,
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "Absolute path to the remote directory containing the program"
    }
  ]

说明： ■ address 是 IP 地址或域名。 ■ port 是远程端口。 ■ localRoot 是本地的代码根目录。 ■ remoteRoot 是远程代码的相对目录。

(VSCode文档可参见)[https://code.visualstudio.com/docs/editor/debugging]

关于 launch.json 的配置 的一些说明

launch.json中有很多属性可以设置, 通过 添加配置 添加基本配置 也可通过鼠标移入，智能提示查看有那些属性可以设置。

配置文件信息常用说明
配置说明 描述
type 调试的类型，node / chrome【基本上 node就是 调试node后台， chrome 就是调试 前台，当然也可以是 firefox 】
version 你定义这个配置文件的版本，生成的时候默认是0.2.0
name 配置文件的名字可以自己起名，当作说明
request 配置文件的请求类型，有launch和attach两种
url 这个是chrome插件带的，指定访问的链接【新版本已经可以不写，自行监听，但是如果写了，地址一定要对应】
webRoot 也是chrome插件带的，指定根目录或者执行文件
sourceMaps 默认是启用的，对于打包的调试，就必须开启了【sourceMaps是啥？看这里】
userDataDir 临时目录,专门保存调试过程产生的东西，这个字段是为了重新打开一个浏览器窗口，不会强制关闭已经打开的浏览器
预定变量 说明如下
预定变量 描述
${workspaceRoot} VSCode中打开文件夹的路径
${workspaceRootFolderName} VSCode中打开文件夹的路径, 但不包含"/"
${file} 当前打开的文件
${relativeFile} 当前打开的文件,相对于workspaceRoot
${fileBasename} 当前打开文件的文件名, 不含扩展名
${fileDirname} 当前打开文件的目录名
${fileExtname} 当前打开文件的扩展名
${cwd} 当前启动时的工作目录

部分参考 VSCode配置 Debugger for Chrome插件