当前位置: 首页 > ai >正文

1-2前端撸码前的准备,包管理工具和环境搭建

一、安装 Node.js 与 npm

  1. 官方安装(推荐初学者)

    • 访问 Node.js 官网 下载 LTS 版本(长期支持版),安装时默认包含 npm。
    • 验证安装
      node -v  # 检查 Node.js 版本
      npm -v   # 检查 npm 版本
      
  2. 版本管理工具(多项目需求)

    • nvm(跨平台):
      curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
      nvm install 18.16.0  # 安装指定版本
      nvm use 18.16.0      # 切换版本
      
      • 支持项目级 .nvmrc 文件自动切换版本。
    • fnm(高性能):
      curl -fsSL https://fnm.vercel.app/install | bash
      fnm install 20.0.0
      
      适合需要快速启动的开发者。

二、项目初始化与依赖管理

  1. 创建项目

    mkdir my-project && cd my-project
    npm init -y  # 生成默认 package.json
    
  2. 安装依赖

    • 生产依赖
      npm install express --save
      
    • 开发依赖(如测试工具):
      npm install eslint prettier --save-dev
      
  3. 配置镜像加速(国内用户)

    • 临时使用淘宝源:
      npm install --registry=https://registry.npmmirror.com
      
    • 永久配置:
      npm config set registry https://registry.npmmirror.com
      

三、开发工具配置

  1. 代码编辑器推荐

    • VS Code:安装插件 ESLint、Prettier、Debugger for Chrome。
    • WebStorm:内置 Node.js 调试和代码分析功能。
  2. 环境变量管理

    • 使用 dotenv 加载 .env 文件:
      npm install dotenv
      
      require('dotenv').config();
      console.log(process.env.PORT);  // 读取端口配置
      
  3. Git 与忽略文件

    • 创建 .gitignore 排除 node_modules/.env

四、调试与优化

  1. 进程管理

    • PM2(生产环境):
      npm install pm2 -g
      pm2 start app.js  # 守护进程运行
      
      支持日志监控和负载均衡。
  2. 性能分析

    • 使用 node --inspect 启动调试模式,通过 Chrome DevTools 分析 CPU/内存。

五、部署准备

  1. 构建与打包

    • 通过 npm run build 生成静态文件(如 Webpack 项目)。
    • 使用 pkg 将 Node.js 应用编译为可执行文件:
      npm install pkg -g
      pkg app.js --targets node18-linux-x64
      
  2. 容器化部署

    • 编写 Dockerfile
      FROM node:18-alpine
      WORKDIR /app
      COPY package*.json ./
      RUN npm install
      COPY . .
      CMD ["node", "app.js"]
      

六、常见问题解决

  • 权限问题:避免全局安装时使用 sudo,可通过 npm config set prefix ~/.npm-global 修改路径。
  • 版本冲突:使用 nvmpnpm 隔离不同项目的 Node.js 版本。

以下是使用 nvmpnpm 隔离不同项目 Node.js 版本的详细指南,结合最新技术动态与最佳实践整理:

1. 安装与配置
  • 安装 nvm
    • Windows:下载 nvm-windows 并运行安装程序,设置 Node.js 符号链接路径(如 C:\nodejs)。
    • macOS/Linux:通过官方脚本安装:
      curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
      
      需在 ~/.bashrc~/.zshrc 中加载环境变量。
  • 国内镜像加速
    修改 settings.txt(Windows)或 .bashrc(macOS/Linux),添加阿里云或腾讯云镜像源:
    node_mirror: https://npmmirror.com/mirrors/node/
    npm_mirror: https://npmmirror.com/mirrors/npm/
    
2. 版本隔离实践
  • 安装与切换版本
    nvm install 18.20.2    # 安装指定版本
    nvm use 18.20.2       # 切换版本(需管理员权限)
    
    通过 nvm ls 查看已安装版本。
  • 项目级版本控制
    在项目根目录创建 .nvmrc 文件,写入版本号(如 18.20.2),进入目录后执行 nvm use 自动切换。
3. 优势与局限
  • 优势
    • 完全隔离不同项目的 Node.js 环境,避免全局污染。
    • 支持快速回退旧版本(如 nvm install v12.22.1)。
  • 局限
    • Windows 需手动处理 .nvmrc 自动切换。
    • 需额外工具管理 npm 全局包(如 npm config set prefix)。

二、使用 pnpm 集成运行时管理

1. 运行时自动安装(v10.14+)
  • 配置:在 package.json 中声明所需运行时:
    {"devEngines": {"runtime": {"name": "node","version": "^24.1.0","onFail": "download"}}
    }
    
    pnpm 会自动下载并隔离指定版本的 Node.js/Bun/Deno,无需预装 nvm。
  • 特点
    • 多运行时支持(Node.js、Bun、Deno)。
    • 版本锁定至 pnpm-lock.yaml,确保一致性。
2. 与传统 nvm 的对比
维度nvmpnpm 运行时管理
安装方式需预装 nvm无需额外工具,声明即下载
多运行时仅支持 Node.js支持 Node.js、Bun、Deno
适用场景长期维护多版本环境快速适配临时项目需求

三、综合建议

  1. 复杂项目:优先使用 nvm,尤其需长期维护多版本或测试兼容性时。
  2. 轻量级项目:选择 pnpm 运行时管理,简化配置并支持多运行时。
  3. 混合方案
    • 用 nvm 管理基础 Node.js 版本,pnpm 处理项目级依赖隔离。
    • 通过 .nvmrcdevEngines 双重声明,增强团队协作一致性。
http://www.xdnf.cn/news/18235.html

相关文章:

  • SPI 机制深度剖析:Java、Spring、Dubbo 的服务发现哲学与实战指南
  • 基于Java虚拟线程的高并发作业执行框架设计与性能优化实践指南
  • ReAct Agent:让AI像人类一样思考与行动的革命性框架
  • 使用 FastAPI 的 WebSockets 和 Elasticsearch 来构建实时应用
  • Python HTML/XML实体处理完全指南:从基础到安全工程实践
  • mac电脑软件左上角的关闭/最小化/最大化按钮菜单的宽度和高度是多少像素
  • 阿里云ECS服务器的公网IP地址
  • 服务器硬件电路设计之 SPI 问答(一):解密 SPI—— 从定义到核心特性
  • 【机器学习深度学习】AI大模型高并发挑战:用户负载部署策略
  • 雷卯针对香橙派Orange Pi 3B开发板防雷防静电方案
  • 运用平均值填充后的数据进行模型预测
  • 计算机毕设Spark项目实战:基于大数据技术的就业数据分析系统Django+Vue开发指南
  • 函数式编程“闭包”概念深入解析
  • 【LeetCode 热题 100】279. 完全平方数——(解法三)空间优化
  • 应用在运行时,向用户索取(相机、存储)等权限,未同步告知权限申请的使用目的,不符合相关法律法规要求--教你如何解决华为市场上架难题
  • 手机截图如何优雅地放在word里
  • Hangfire定时部署(.NET 8 + SQL Server)
  • 读者写者问题
  • Linux多线程——线程池
  • Spark学习
  • MySQL基础操作
  • 网络连接的核心机制
  • HTML+CSS:浮动详解
  • Python 文件操作与异常处理全解析
  • Zemax光学设计输出3D
  • idea进阶技能掌握, 使用自带HTTP测试工具,完全可替代PostMan
  • OpenSSH 命令注入漏洞(CVE-2020-15778)修复,升级openssh9.8p1
  • rust语言 (1.88) egui (0.32.1) 学习笔记(逐行注释)(一)基本代码
  • Qt设置软件使用期限【新版防修改系统时间】
  • React响应式链路