上一篇：00 专栏介绍

---

一、场景引入：先认舞台，再学戏法

写 JS 代码之前，先要认清一件事：JS 有两个世界。

• 一个你已经拥有——浏览器世界：此刻你用来读这篇文章的浏览器，里面就住着一个 JS 运行环境，开箱即用，一个软件都不用装；
• 一个需要安装——Node 世界：让 JS 走出浏览器、进入命令行的世界。以后读写文件、定时抓数据，都在这个世界的地盘上干活。

很多新手在这第一步被劝退：装了 Node 却在命令行里敲 node 没反应、双击 .js 文件弹出一堆看不懂的英文报错框、代码明明没错就是跑不起来。这一篇就是来解决它们的——按顺序做，10 分钟内你会得到：

• 一个能在命令行运行 JS 的 Node.js；
• 一个好用的代码编辑器（VS Code——对 JS 出厂即支持，一个扩展都不用装）；
• 一份"环境体检报告"脚本，随时确认环境是否正常。

二、本篇目标

1. 装好 Node.js（含 npm 商店）；
2. 装好 VS Code；
3. 运行本篇配套的 验证环境.js，看到体检报告显示"可以开始第 2 篇"；
4. 认识浏览器 DevTools 控制台——两个世界全部点亮。

不需要写任何代码，只需要点鼠标和复制粘贴。

三、知识点讲解

3.1 两个世界，一张关系图（一次讲清，后面不再迷糊）

先用一个戏班的比喻把所有角色摆上桌：

• 编辑器（VS Code）＝稿纸。让你写得舒服：语法高亮、自动补全、括号配对提醒。它自己不运行代码；
• 运行环境＝舞台。负责把剧本真正演出来。JS 特殊在有两个舞台：浏览器（观众看得见的前台）和 Node（干重活的后台车间）——两个舞台说的都是 JS 这门语言；
• npm＝道具商店（Node 世界专属）。以后要读写 Excel、抓网页，就去商店装对应的工具包。

三者关系一句话：你在稿纸上写剧本，剧本拿到舞台上演出，演出缺道具就通过商店去租。

新手 90% 的环境问题，本质都是这几者没接上线：命令行找不到舞台（PATH 没配好）、Windows 用错了运行器（双击 .js 的坑）、编辑器里不知道怎么跑代码。记住这张关系图，第六节排查报错会反复用到。

3.2 为什么浏览器明明能跑 JS，还要装 Node

这是 JS 学习者必问的问题，值得认真回答。浏览器世界有三条天花板，本专栏后面都会撞上：

1. 碰不到你的文件。浏览器出于安全，严禁网页随意读写硬盘——想做"批量整理文件夹"“自动生成 Excel”，浏览器使不上劲；
2. 关了就忘。网页一关，代码就停了——想"每天早上 9 点自动跑一遍"，得有个能常驻命令行的选手；
3. 进不了 npm 商店。JS 生态最肥的工具库仓库，只在 Node 世界营业。

所以分工是明确的：浏览器负责"看得见"，Node 负责"干重活"。本专栏的路线也顺着这条线走：前 27 篇主战场在浏览器（做看得见的工具），模块四起进 Node 车间（读写文件、采集数据）。两个世界都点亮，后面 39 篇的每一步你都有主场。

3.3 第一步：安装 Node.js

1. 下载

官网 nodejs.org，国内推荐中文站 nodejs.cn（同一批安装包，访问更快）。首页下载区认准 LTS（长期支持） 版本——旁边的 “Current” 是尝鲜版，稳定性和配套工具都没跟上，别碰。

以下以中文站 nodejs.cn 下载为例：

• Windows 认准 .msi 结尾的 64 位安装包（如 node-v24.x.x-x64.msi）；
• Mac 用户：选 .pkg 结尾的，双击一路继续，装完在"终端"里执行 node -v 验证。

2. 安装（重点看一个界面）

双击 .msi，一路 Next，唯一要停下来看的是 “Tools for Native Modules” 界面：

安装路径默认即可，唯一要求：路径里不要有中文和空格（默认 C:\Program Files\nodejs 符合）。

Tools for Native Modules 界面，红框标注 “Automatically install the necessary tools…” 复选框——保持不勾选，直接 Next

那个复选框保持不勾：勾上它会额外安装一整套编译工具（要管理员权限、下载慢，本专栏完全用不上）。

3. 验证

按 Win + R，输入 cmd 回车，打开黑色命令行窗口，依次输入：

node -v
npm -v

看到两行版本号（例如 v24.20.0 和 11.19.0），Node 世界就绪。

3.4 第二步：安装 VS Code（Windows / Mac 通用）

1. 官网 code.visualstudio.com 下载，安装。Windows 安装向导里的勾选项全部勾上（尤其"添加到 PATH"和两个"通过 Code 打开"右键菜单）；
   
   
   
   
   
   
   
2. 打开就能写 JS——JS 是 VS Code 的"母语"：语法高亮、智能补全出厂内置，一个扩展都不用装（这也是选 JS 的一份额外福利：编辑器零配置）。

   想要中文界面，就到扩展商店搜 Chinese 装官方语言包。
   
   
   

3.5 第三步：点亮浏览器世界（DevTools 控制台）

浏览器世界不用安装，但要认识它的驾驶舱——DevTools（开发者工具）：

任意网页按 F12（或右键 → 检查），页面侧边/底部展开一排面板。面板很多，本篇只用一个：Console（控制台）。

注：新人第一次使用可能出现“控制台被锁”报错：
报错长相：黄色 Warning: Don’t paste code into the DevTools Console…（Chrome/Edge 防 self-XSS 的自我保护）
解锁三步：点输入行 → 手敲 ：allow pasting 回车 → 锁消失，可以正常输入了

控制台是浏览器世界的"草稿纸"：敲一行 JS，回车，立刻执行。光标点进控制台最底部的输入行，跟我做两个实验：

1 + 1

回车，下面立刻出现 2

再来：

"你好".repeat(3)

回车，得到 "你好你好你好"——文字还能乘出重复，是不是有点意外？

不用建文件、不用保存，这就是 JS 给零基础的第一份见面礼：你的浏览器，现在就是一台编程机器。

至此，两个世界全部点亮：命令行里有 Node，浏览器里有 Console。

四、完整实战：环境体检脚本

在桌面新建文件夹 js （js运行的文件夹里不能带中文），用 VS Code 打开（文件 → 打开文件夹）

建文件夹为什么不能带中文
1、npm init 直接报错：npm 规定项目名只能用小写字母、数字、连字符、下划线，而 npm init 会拿文件夹名当项目名，带中文的话 npm init -y 当场报 npm error Invalid name: “js学习”，第 28 篇 Node 入门马上要用，这个坑躲不掉；
2、编码暗坑：Windows 终端默认 GBK、JS 工具链读 UTF-8，中文路径在部分工具里会乱码，甚至“文件明明在，工具说找不到”；
3、命名口诀：全英文、小写、不用空格（要分隔用 - 或 _）。

在里面新建文件 验证环境.js（不会创建的同学可以先直接点击前面的js名直接下载）：

const os = require("os");

console.log("=".repeat(40));
console.log("环境体检报告");
console.log("=".repeat(40));
console.log(`Node 版本：${process.version}`);
console.log(`V8 引擎：${process.versions.v8}`);
console.log(`操作系统：${os.type()} ${os.release()}`);
console.log(`CPU 架构：${os.arch()}`);

const major = Number(process.versions.node.split(".")[0]);
if (major >= 20) {
  console.log("结论：版本满足本专栏要求（20 及以上），可以开始第 2 篇");
} else {
  console.log("结论：版本过旧，请到 nodejs.cn 重下 LTS 版覆盖安装");
}

console.log("提示：npm 装包慢时，按第六节报错 4 换国内镜像");

按 Ctrl + S 保存后运行（一定要记得先保存，终端跑的是磁盘上的文件，不是你编辑器里看到的代码，所以未保存磁盘上那份 验证环境.js 还是空的（或旧版）会导致运行的代码不对！）：按 Ctrl + `（反引号，Esc 正下方那个键）打开 VS Code 底部的集成终端，输入：

node 验证环境.js

VS Code 里每次打开新文件夹后，首次运行都会出以下弹窗，点：信任文件夹并继续 就行

逐行说明三个要点（现在看不懂完全正常，全是"照抄级咒语"，后面篇篇都会拆开讲）：

• process / os：Node 自带的"系统信息包"，报告里的版本、系统信息全从它们来——第 28 篇正式讲；
• console.log：往终端打印一行字——下一整篇的主角；
• ${} 模板字符串、.repeat()、.split()：第 4、10 篇讲，现在当固定搭配照抄。

五、运行效果

正常输出类似：

========================================
环境体检报告
========================================
Node 版本：v24.20.0
V8 引擎：13.6.233.17-node.53
操作系统：Windows_NT 10.0.19045
CPU 架构：x64
结论：版本满足本专栏要求（20 及以上），可以开始第 2 篇
提示：npm 装包慢时，按第六节报错 4 换国内镜像

两个小说明：Windows_NT 是 Node 对 Windows 家族的内部称呼（从 NT 内核时代传下来的老名字），正常现象；V8 引擎 是 Chrome 和 Node 共用的 JS 引擎——这正是"两个世界说同一门语言"的底层原因。

重点核对一处：结论行是否为"可以开始第 2 篇"。不对就直接跳到第六节，对号入座排查。

六、常见报错与排查（本篇精华，建议收藏）

报错 1：'node' 不是内部或外部命令，也不是可运行的程序

C:\Users\xxx>node -v
'node' 不是内部或外部命令，也不是可运行的程序或批处理文件。

原因：PATH 环境变量没配好（.msi 安装包默认会配，安装中途取消或自定义安装可能漏掉）。
解决（二选一）：

• 关掉 cmd 重开再试——环境变量改完必须重开窗口才生效，这一步就能救一半人；
• 还不行就重新运行那个 .msi，选 Repair（修复），一路下一步。

报错 2：双击 .js 文件，弹出一堆英文报错框（Windows Script Host）

原因：Windows 双击 .js 的默认动作不是"用 Node 运行"，而是交给系统自带的上世纪脚本引擎 WSH——它说的是另一门老方言，看不懂你的现代 JS。
解决：记住一条铁律——.js 文件永远不靠双击运行。让代码跑起来只有两条正道：命令行 node 文件名.js（本篇的做法），或放进 HTML 让浏览器执行（下一篇的做法）。

报错 3：node -v 能出版本号，但版本很老（v4、v6、v14）

原因：公司旧电脑装过老 Node，或多个版本叠装互相干扰。
解决：官网下最新 LTS 的 .msi，直接覆盖安装，再 node -v 确认版本变新。

报错 4：npm install 卡很久最后报网络错误

npm error network request to https://registry.npmjs.org/xxx failed

原因：npm 默认从国外仓库下载，国内网络慢。
解决：换国内镜像，命令行执行一次、永久生效：

npm config set registry https://registry.npmmirror.com
npm config get registry

报错 5：VS Code 里点"运行和调试"，弹出选择面板不知道选什么

原因：.js 文件没有"一键运行"按钮，第一次点会请你选择调试器。
解决：选 Node.js 也能跑（输出在"调试控制台"），但本专栏统一用更简单的方式——Ctrl + 开集成终端，敲node 文件名.js`。养成这个习惯，换任何电脑、任何编辑器都不怕。

加送一条：cmd 里跑 node 中文变乱码

原因：cmd 默认 GBK 编码，Node 输出的是 UTF-8。
解决：优先用 VS Code 集成终端（天然 UTF-8）；非要在 cmd 里跑，先执行 chcp 65001 再运行。

排查心法（对应 3.1 节的关系图）：cmd 报"不是内部或外部命令"＝系统找不到 Node；弹 WSH 报错框＝Windows 用错了运行器；VS Code 里跑不动＝开集成终端用 node 命令；npm 卡住＝商店的网络问题。先定位是哪一环，再对号入座。

七、练习作业

1. 在 cmd 里分别执行 node -v 和 npm -v，确认都能出版本号；
2. 在 VS Code 集成终端里跑通 验证环境.js，把你的"环境体检报告"截图发在评论区（跑不出来的同学，把报错原文也贴上来，我会逐条回复）——这也是第 2 篇开头的举手签到；
3. 浏览器 F12 → Console，输入 1 + 1 回车，再输入 "你好".repeat(3)——把"两个世界都点亮"做实；
4. 选做：执行 npm config get registry，看看你当前的源是国内还是国外（为模块四预热）。

---

下一篇预告：《02 你的第一行代码：让浏览器开口说话》——console.log 的玩法、让代码跑起来的三种方式、以及新手第一次见到红色报错时该怎么办。