第02期 | 环境搭建安装Node.js与开发工具配置 学习目标掌握nvm版本管理器的安装和使用能在多个Node.js版本间自由切换配置VS Code为专业的Node.js开发环境包括插件、调试、代码片段理解npm与npx的区别掌握包管理的基本操作搭建一个符合工程规范的Node.js项目ESLint Prettier EditorConfig学会使用nodemon实现代码热重载提升开发效率 核心知识一、Node.js版本管理为什么需要nvmNode.js版本更新很快每年发布一个大版本偶数为LTS长期支持版。不同项目可能依赖不同的Node.js版本——老项目用v16新项目用v22某个开源工具要求v18。如果你只装了一个版本的Node.js每次切换项目都要卸载重装非常痛苦。nvmNode Version Manager解决了这个问题它让你可以在同一台电脑上安装多个Node.js版本一行命令就能切换。安装nvmWindows使用nvm-windows去 github.com/coreybutler/nvm-windows 下载最新的nvm-setup.exe双击安装。安装完成后打开新的终端窗口验证nvm version# 输出类似1.1.12Mac/Linuxcurl-o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh|bash安装后将以下内容添加到~/.bashrc或~/.zshrcexportNVM_DIR$HOME/.nvm[-s$NVM_DIR/nvm.sh]\.$NVM_DIR/nvm.sh然后source ~/.bashrc或重启终端。nvm常用命令# 安装最新LTS版本nvminstall--lts# 安装指定版本nvminstall22.12.0# 安装最新版nvminstallnode# 列出已安装的版本nvmls# 输出# * 22.12.0 (Currently using 64-bit executable)# 20.18.0# 18.20.4# 切换版本nvm use22.12.0# 设置默认版本nvmaliasdefault22.12.0# 卸载某个版本nvm uninstall18.20.4实战操作让我们安装两个版本并切换# 安装LTS版本nvminstall--lts# 输出Installing node v22.12.0... Done# 安装上一个LTSnvminstall20# 输出Installing node v20.18.0... Done# 查看已安装版本nvmls# 切换到v20nvm use20node-v# 输出v20.18.0# 切换回v22nvm use22node-v# 输出v22.12.0.nvmrc文件项目级版本锁定在项目根目录创建.nvmrc文件写入版本号echo22.12.0.nvmrc之后在项目目录下直接运行nvm usenvm会自动读取.nvmrc并切换到对应版本。团队协作时每个成员都用同一个Node.js版本避免版本不一致导致的bug。二、VS Code配置打造Node.js开发利器VS CodeVisual Studio Code是Node.js开发的事实标准编辑器。但开箱即用的配置还不够我们需要装几个关键插件。必装插件清单1. ESLint— 代码检查实时检查代码质量标记语法错误、不规范写法、潜在bug。写代码时左边有红色/黄色波浪线鼠标悬停看详情。2. Prettier— 代码格式化一键格式化代码统一缩进、引号、分号等风格。配合Format on Save保存时自动格式化。3. ESLint Prettier 整合这两个工具可能有冲突比如ESLint要求有分号Prettier要求没分号。需要用eslint-config-prettier关闭ESLint中与Prettier冲突的规则。4. Path Intellisense— 路径自动补全输入文件路径时自动补全require(./)时会提示目录下的文件。5. DotENV— .env文件语法高亮给.env文件添加语法高亮方便编辑环境变量。6. Thunder Client— API测试VS Code内置的API测试工具类似Postman但更轻量。开发API时不用切窗口。7. Error Lens— 错误提示增强把错误和警告信息直接显示在代码行末尾不用鼠标悬停。VS Code配置文件在项目根目录创建.vscode/settings.json{// 保存时自动格式化editor.formatOnSave:true,// 默认使用Prettier格式化editor.defaultFormatter:esbenp.prettier-vscode,// ESLint自动修复editor.codeActionsOnSave:{source.fixAll.eslint:explicit},// 文件保存时自动去除行尾空格files.trimTrailingWhitespace:true,// 文件末尾自动加空行files.insertFinalNewline:true,// 隐藏不需要看的文件files.exclude:{**/node_modules:true,**/.git:true,**/dist:true,**/coverage:true},// TypeScript/JavaScript的导入排序[javascript]:{editor.defaultFormatter:esbenp.prettier-vscode},[javascriptreact]:{editor.defaultFormatter:esbenp.prettier-vscode},[json]:{editor.defaultFormatter:esbenp.prettier-vscode}}VS Code调试配置创建.vscode/launch.json配置Node.js调试{version:0.2.0,configurations:[{name:调试当前文件,type:node,request:launch,program:${file},console:integratedTerminal,skipFiles:[node_internals/**]},{name:调试npm start,type:node,request:launch,runtimeExecutable:npm,runtimeArgs:[run,dev],console:integratedTerminal,skipFiles:[node_internals/**]},{name:附加到进程,type:node,request:attach,processId:${command:PickProcess},restart:true}]}使用方法打开任意JS文件按F5选择调试当前文件在代码行号左边点击设置断点红点运行时会在断点处暂停可以查看变量、调用栈、表达式这是Node.js开发中最常用的调试方式比console.log高效10倍。三、npm与npx包管理的两个面npmNode Package Managernpm是Node.js的包管理器随Node.js一起安装。它的核心功能是管理项目依赖。# 初始化项目生成package.jsonnpminit-y# 安装生产依赖npminstallexpress# 简写npm i express# 安装开发依赖npminstall--save-dev eslint prettier# 简写npm i -D eslint prettier# 全局安装npminstall-gnodemon# 简写npm i -g nodemon# 安装package.json中列出的所有依赖npminstall# 简写npm i# 卸载包npmuninstall express# 简写npm un express# 更新包npmupdate express# 查看已安装的包npmlistnpmlist--depth0# 只看顶层依赖# 查看包的详细信息npminfo express# 查看包的版本npmlsexpress# 清理缓存npmcache clean--force# 审计安全漏洞npmauditnpmaudit fix# 自动修复npxNode Package eXecutenpx是npm 5.2内置的工具用于执行包而不是安装包。# 执行一个本地安装的包npx eslint.# 执行一个未安装的包临时下载执行不污染项目npx create-react-app my-app# 执行特定版本的包npx eslint8.0.0.# 执行GitHub上的脚本npx github:piuccio/cowsayhellonpm vs npx的核心区别维度npmnpx功能安装/管理包执行包持久性安装的包会保存在node_modules临时执行不保存除非指定典型场景npm i express安装Expressnpx create-react-app创建项目PATH全局安装的包在PATH中本地安装的包也能通过npx执行实际使用建议安装项目依赖 → 用npm install执行一次性命令创建项目、初始化工具 → 用npx运行项目中安装的CLI工具 → 用npx或npm scripts四、搭建工程化项目让我们从零搭建一个规范的Node.js项目。步骤1初始化项目mkdirmy-node-projectcdmy-node-projectnpminit-y生成的package.json{name:my-node-project,version:1.0.0,description:,main:index.js,scripts:{test:echo \Error: no test specified\ exit 1},keywords:[],author:,license:ISC}修改为更规范的配置{name:my-node-project,version:1.0.0,description:一个规范的Node.js项目,main:src/index.js,type:module,scripts:{dev:nodemon src/index.js,start:node src/index.js,lint:eslint src/,format:prettier --write \src/**/*.js\,test:echo \no tests yet\},keywords:[nodejs,tutorial],author:Your Name,license:MIT,engines:{node:18.0.0}}关键字段说明type: module— 使用ES Modulesimport/export不写则默认CommonJSengines— 声明需要的Node.js版本scripts— 定义可执行命令步骤2安装ESLint Prettiernpminstall-Deslint prettier eslint-config-prettier eslint-config-standard创建.eslintrc.json{env:{node:true,es2022:true},extends:[standard,prettier],parserOptions:{ecmaVersion:latest,sourceType:module},rules:{no-unused-vars:warn,no-console:off,prefer-const:error,no-var:error}}创建.prettierrc{semi:true,singleQuote:true,tabWidth:2,trailingComma:es5,printWidth:100,arrowParens:always,endOfLine:lf}创建.prettierignorenode_modules/ dist/ coverage/ *.min.js创建.eslintignorenode_modules/ dist/ coverage/步骤3EditorConfig创建.editorconfigroot true [*] charset utf-8 end_of_line lf indent_style space indent_size 2 insert_final_newline true trim_trailing_whitespace true [*.md] trim_trailing_whitespace falseEditorConfig确保不同编辑器VS Code / WebStorm / Vim打开同一项目时缩进、换行等保持一致。步骤4项目目录结构my-node-project/ ├── src/ │ ├── index.js # 入口文件 │ ├── config/ │ │ └── index.js # 配置管理 │ ├── utils/ │ │ └── logger.js # 工具函数 │ ├── routes/ │ │ └── index.js # 路由定义 │ ├── controllers/ │ │ └── userController.js # 控制器 │ └── middleware/ │ └── errorHandler.js # 中间件 ├── tests/ │ └── user.test.js ├── .env # 环境变量不提交到git ├── .env.example # 环境变量示例 ├── .eslintrc.json ├── .prettierrc ├── .editorconfig ├── .gitignore ├── package.json └── README.md创建.gitignore# 依赖 node_modules/ # 环境变量 .env .env.local # 构建产物 dist/ build/ # 日志 *.log npm-debug.log* # 编辑器 .vscode/ .idea/ # 系统 .DS_Store Thumbs.db # 测试覆盖率 coverage/创建.env.example# 环境变量示例复制为.env并修改 NODE_ENVdevelopment PORT3000 DATABASE_URLmongodb://localhost:27017/myapp JWT_SECRETyour-secret-key-here创建.env实际使用NODE_ENVdevelopment PORT3000安装dotenv来读取环境变量npminstalldotenv步骤5入口文件创建src/index.js// 如果使用CommonJStype未设为module// require(dotenv).config();// 如果使用ES Modulesimportdotenv/config;importhttpfromhttp;constPORTprocess.env.PORT||3000;constNODE_ENVprocess.env.NODE_ENV||development;constserverhttp.createServer((req,res){res.setHeader(Content-Type,application/json; charsetutf-8);if(req.url/req.methodGET){res.statusCode200;res.end(JSON.stringify({message:Hello from my-node-project!,env:NODE_ENV,time:newDate().toISOString()}));}elseif(req.url/healthreq.methodGET){res.statusCode200;res.end(JSON.stringify({status:ok,uptime:${process.uptime().toFixed(2)}s,memory:${(process.memoryUsage().rss/1024/1024).toFixed(2)}MB}));}else{res.statusCode404;res.end(JSON.stringify({error:Not Found}));}});server.listen(PORT,(){console.log( Server running on http://localhost:${PORT});console.log( Environment:${NODE_ENV});console.log( Health check: http://localhost:${PORT}/health);});步骤6nodemon热重载npminstall-Dnodemonnodemon会监听文件变化自动重启服务器。你已经在上面的scripts中配置了dev: nodemon src/index.js。创建nodemon.json做更细的配置{watch:[src/],ext:js,json,ignore:[src/tests/,node_modules/],exec:node src/index.js,delay:500ms}现在运行npmrun dev修改src/index.js里的内容保存服务器会自动重启。这就是开发时的热重载体验。五、npm镜像加速国内访问npm官方源较慢建议切换镜像# 查看当前源npmconfig get registry# 默认https://registry.npmjs.org/# 切换为淘宝镜像npmconfigsetregistry https://registry.npmmirror.com# 验证npmconfig get registry# 输出https://registry.npmmirror.com# 临时使用淘宝源安装某个包npminstallexpress--registryhttps://registry.npmmirror.com或者安装nrmnpm registry manager来管理多个源npminstall-gnrm# 列出所有可用源nrmls# 输出# * npm ---------- https://registry.npmjs.org/# yarn --------- https://registry.yarnpkg.com/# tencent ------ https://mirrors.cloud.tencent.com/npm/# cnpm --------- https://r.cnpmjs.org/# taobao ------- https://registry.npmmirror.com/# 切换到淘宝源nrm use taobao# 测试速度nrmtest六、常见环境问题排查问题1node 不是内部或外部命令原因Node.js没有加入系统PATH。解决Windows重新运行Node.js安装程序勾选Add to PATHMac/Linux检查~/.bashrc或~/.zshrc中是否有Node.js的PATH配置问题2npm ERR! ERESOLVE unable to resolve dependency tree原因依赖版本冲突。解决# 方案1使用--legacy-peer-depsnpminstall--legacy-peer-deps# 方案2使用--forcenpminstall--force# 方案3删除lock文件重装rmpackage-lock.jsonrm-rfnode_modulesnpminstall问题3EACCES: permission denied原因全局安装时权限不足Mac/Linux常见。解决# 方案1用nvm管理Node.js推荐nvm安装的Node.js在用户目录下无权限问题# 方案2修改npm全局目录mkdir~/.npm-globalnpmconfigsetprefix~/.npm-globalechoexport PATH~/.npm-global/bin:$PATH~/.bashrcsource~/.bashrc# 方案3用sudo不推荐可能导致权限混乱sudonpminstall-gpackage-name问题4nodemon命令找不到原因nodemon没有全局安装也没有通过npx运行。解决# 方案1用npx运行推荐npx nodemon src/index.js# 方案2通过npm scripts运行在package.json中配置后npmrun dev# 方案3全局安装npminstall-gnodemon️ 实战练习练习1基础题 — 完整项目初始化按照本文的步骤从零创建一个Node.js项目要求用nvm确保Node.js版本 ≥ 18初始化package.json配置type为module安装并配置ESLint Prettier创建规范的目录结构实现一个返回Hello World的HTTP服务器用nodemon实现热重载确保保存代码时自动格式化练习2进阶题 — 多环境配置创建支持开发/测试/生产三种环境的配置系统// src/config/index.js// 要求// 1. 读取.env文件// 2. 根据NODE_ENV返回不同配置// 3. 开发环境PORT3000, LOG_LEVELdebug// 4. 测试环境PORT3001, LOG_LEVELwarn// 5. 生产环境PORT8080, LOG_LEVELerror// 6. 导出一个config对象提示创建.env.development、.env.test、.env.production三个文件用dotenv的path选项加载对应的文件。练习3挑战题 — 自定义npm script在package.json中配置以下scripts并确保全部可运行{scripts:{dev:nodemon src/index.js,start:node src/index.js,lint:eslint src/ --fix,format:prettier --write \src/**/*.js\,clean:rm -rf node_modules package-lock.json,reinstall:npm run clean npm install,check:npm run lint npm run format,info:node -e \console.log(Node:, process.version, \\nEnv:, process.env.NODE_ENV || development)\}}然后尝试运行npm run info看输出运行npm run check同时检查和格式化代码运行npm run reinstall重新安装依赖 面试考点Q1: nvm的作用是什么.nvmrc文件有什么用nvm是Node.js版本管理器允许在同一台机器上安装和切换多个Node.js版本。.nvmrc文件锁定项目所需的Node.js版本团队成员进入项目目录后运行nvm use即可自动切换到正确版本确保所有人使用相同的环境。Q2: npm install的–save和–save-dev有什么区别--save可省略将包安装到dependencies是生产环境运行时需要的依赖如express。--save-dev-D安装到devDependencies是开发时需要的工具如eslint、nodemon。部署到生产环境时npm install --production只安装dependencies不安装devDependencies减小部署体积。Q3: package.json中type: module的作用声明项目使用ES Modules模块系统。设置后.js文件中的import/export语法可以直接使用。如果不设置默认使用CommonJSrequire/module.exports。也可以在文件名上区分.mjs用ESM.cjs用CommonJS。Q4: nodemon的原理是什么nodemon包裹了node命令在启动Node.js进程的同时用fs.watch或chokidar监听项目目录下的文件变化。当文件被修改时nodemon会杀掉当前Node.js进程并重新启动。本质上是一个监听文件变化自动重启的包装器。 本期要点nvm管理多版本一台机器安装多个Node.js版本.nvmrc锁定项目版本VS Code三件套ESLint检查 Prettier格式化 调试配置断点调试npm vs npxnpm管安装npx管执行本地CLI工具用npx或scripts运行工程化项目标配ESLint Prettier EditorConfig .gitignore .envnodemon热重载修改代码自动重启开发效率翻倍npm镜像加速国内用淘宝/腾讯镜像nrm管理多个源环境问题排查PATH配置、依赖冲突、权限问题都有标准解法 下期预告第03期《Node.js运行原理V8引擎与事件循环》—— 我们将深入Node.js的核心——V8引擎如何执行JavaScript、事件循环Event Loop的六个阶段、宏任务与微任务的执行顺序、以及为什么setTimeout和Promise的回调时机不同。这是Node.js面试中被问得最多的知识点理解它意味着你真正懂Node.js。如果你没有苹果电脑需要上传ios到APPStore可以访问以下网站iPA上传工具 - IPA解析与AppStore提交