如何在Linux上搭建JS开发环境

Linux上搭建JS开发环境

一 安装 Node.js 与包管理器

• 系统包管理器安装（简单稳定，版本可能偏旧）
  • Ubuntu/Debian

    sudo apt update
    sudo apt install -y nodejs npm
    

  • CentOS/RHEL（先启用 EPEL）

    sudo yum install -y epel-release
    sudo yum install -y nodejs npm
    

• 使用 NVM 安装（推荐，便于多版本切换）

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
  source ~/.bashrc
  nvm install --lts     # 或 nvm install node
  nvm use --lts
  

• 使用 NodeSource 仓库（获取更新版本）

  # Ubuntu/Debian 示例（按需替换版本号）
  curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
  sudo apt-get install -y nodejs
  

• 验证安装

  node -v
  npm -v
  

以上方法覆盖系统包管理器、NVM 与 NodeSource 三种常见方式，适合不同版本与灵活性需求。

二 选择与安装编辑器

• 推荐安装 Visual Studio Code

  sudo apt update
  sudo apt install -y software-properties-common apt-transport-https wget
  wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -
  sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"
  sudo apt update
  sudo apt install -y code
  

• 常用扩展

  code --install-extension dbaeumer.vscode-eslint
  code --install-extension esbenp.prettier-vscode
  code --install-extension msjsdiag.debugger-for-chrome
  

VS Code 提供完善的 JS/TS 生态与调试体验，配合 ESLint、Prettier 可显著提升代码质量与一致性。

三 创建项目与运行调试

• 初始化项目

  mkdir my-js-project &
      &
   cd $_
  npm init -y
  

• 安装常用开发依赖（按需）

  npm i -D webpack webpack-cli babel-loader @babel/core @babel/preset-env
  npm i -D webpack-dev-server
  

• 启动本地开发服务器（示例脚本）

  # package.json
  {
  
    "scripts": {
   "start": "webpack serve --open" }
  
  }
  
  npm start
  

• 运行与调试

  node index.js
  node inspect app.js
  

• VS Code 调试配置示例（.vscode/launch.json）

  {
  
    "version": "0.2.0",
    "configurations": [
      {
  
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${
  workspaceFolder}
  /index.js"
      }
  
    ]
  }
      
  

以上覆盖了从初始化、依赖管理、开发服务器到断点调试的完整链路。

四 前端项目与浏览器运行

• 浏览器直接运行
  • 创建 index.html

    <
        !doctype html>
        
    <
        meta charset="utf-8">
        
    <
        title>
        JS in Browser<
        /title>
        
    <
        script src="index.js">
        <
        /script>
        
    

  • 用浏览器打开 index.html 即可执行 JS。
• 使用现代前端工作流
  • 通过 npm/yarn 管理依赖与脚本
  • 使用 Webpack Dev Server 提供热更新与本地预览

  npm i -D webpack-dev-server
  

  • 浏览器开发者工具（F12）可用于 Console、Sources 等调试 以上方式兼顾入门与工程化开发场景。

五 进阶与常用工具

• 进程管理（生产环境）

  npm i -g pm2
  pm2 start app.js --name "my-app"
  pm2 logs
  pm2 monit
  

• 其他运行时与包管理器
  • Deno（内置 TypeScript 支持）

    curl -fsSL https://deno.land/x/install/install.sh | sh
    deno run deno_app.js
    

  • Yarn

    curl -o- -L https://yarnpkg.com/install.sh | bash
    yarn init -y
    

• 版本控制与协作

  sudo apt install -y git
  git init
  git add .
  git commit -m "Initial commit"
  

以上工具覆盖进程守护、替代运行时与团队协作基础能力。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！