ubuntu如何搭建js开发环境 - 问答

Ubuntu搭建JavaScript开发环境完整步骤

1. 安装Node.js与npm（核心运行环境）

Node.js是JavaScript的服务器端运行环境，npm是其包管理工具，是JS开发的基础。Ubuntu系统推荐通过NodeSource仓库或**nvm（版本管理器）**安装，避免官方仓库版本过旧。

方法1：通过NodeSource安装（推荐，版本新）
以安装Node.js 20.x LTS版本为例，执行以下命令：

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -  # 添加NodeSource仓库
sudo apt install -y nodejs  # 安装Node.js（自动包含npm）

验证安装：

node -v  # 输出类似 v20.x.x（版本号）
npm -v   # 输出对应npm版本（如 10.x.x）

方法2：使用nvm（灵活管理多版本）
若需要同时管理多个Node.js版本（如项目依赖不同版本），推荐使用nvm：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash  # 安装nvm
source ~/.bashrc  # 重新加载环境变量
nvm install --lts  # 安装最新LTS版本（如 v20.x）
nvm use --lts      # 切换到LTS版本（默认使用）

验证安装同上（node -v、npm -v）。

注意事项：
若安装后出现command not found，需重新加载环境变量（source ~/.bashrc）；若需切换版本，用nvm use <版本号>。

2. 配置npm全局安装路径（解决权限问题）

默认情况下，全局安装的npm包需sudo权限，易引发安全问题。建议配置用户级全局路径：

mkdir ~/.npm-global  # 创建全局目录
npm config set prefix '~/.npm-global'  # 设置npm前缀为用户目录
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc  # 添加到环境变量
source ~/.bashrc  # 生效配置

此后，全局安装包无需sudo（如npm install -g webpack）。

3. 安装常用开发工具

根据项目需求，安装以下工具提升开发效率：

代码编辑器：Visual Studio Code（推荐）
VS Code是轻量且功能强大的JS编辑器，支持语法高亮、调试、扩展插件等功能：

sudo apt install software-properties-common apt-transport-https wget
wget -qO - https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
sudo install -o root -g root -m 644 microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update
sudo apt install code  # 安装VS Code

安装后，可通过扩展商店搜索“JavaScript”“ESLint”“Prettier”等插件增强功能。

构建工具：Webpack（打包优化）
用于打包JS模块、压缩代码，适合复杂项目：
```
npm install -g webpack webpack-cli  # 全局安装Webpack
```
转译工具：Babel（兼容旧浏览器）
将ES6+语法转译为ES5，提升代码兼容性：
```
npm install -g @babel/core @babel/cli @babel/preset-env  # 安装Babel核心工具
```

包管理替代：Yarn（可选）
Yarn是Facebook推出的快速包管理工具，比npm更高效：

npm install -g yarn  # 通过npm安装Yarn
yarn --version  # 验证安装（输出版本号）

4. 创建并运行第一个JS项目

通过npm init初始化项目，创建入口文件并运行：

mkdir my-js-project  # 创建项目目录
cd my-js-project     # 进入目录
npm init -y          # 初始化package.json（自动生成项目元数据）

创建index.js文件（项目入口），写入简单代码：

// index.js
console.log("Hello, Ubuntu JS Development!");

运行项目：

node index.js  # 输出：Hello, Ubuntu JS Development!

若需启动本地服务器（如开发Web应用），可安装express框架：

npm install express --save  # 安装express（添加到项目依赖）

创建server.js：

// server.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello from Express Server!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

运行服务器：

node server.js  # 访问 http://localhost:3000 查看效果

5. 可选：版本管理与镜像加速

版本管理：nvm切换版本
若已安装nvm，可通过nvm install <版本号>安装多个版本，用nvm use <版本号>切换（如nvm use 18.16.0）。

镜像加速：npm/Yarn换源
国内用户可通过换源提升下载速度：

npm config set registry https://registry.npmmirror.com  # npm换源
yarn config set registry https://registry.npmmirror.com  # Yarn换源

通过以上步骤，你已完成Ubuntu系统下的JavaScript开发环境搭建，可开始编写、运行和调试JS项目。根据项目需求，可进一步安装其他工具（如ESLint代码检查、Prettier格式化等）。

0 赞

0 踩