开发环境搭建与工具 - 在线学习与练习平台

Node.js安装与配置

什么是Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，它让JavaScript能够在服务器端运行。Node.js不仅可以用于后端开发，还是现代前端开发工具链的基础。

安装Node.js

方法1：官方安装包

访问Node.js官网
下载LTS（长期支持）版本
运行安装程序，按照提示完成安装

方法2：使用包管理器

Windows（使用Chocolatey）：

# 安装Chocolatey（如果未安装）
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

# 安装Node.js
choco install nodejs

macOS（使用Homebrew）：

# 安装Homebrew（如果未安装）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 安装Node.js
brew install node

Linux（Ubuntu/Debian）：

# 更新包列表
sudo apt update

# 安装Node.js
sudo apt install nodejs npm

# 或者使用NodeSource仓库获取最新版本
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

方法3：使用版本管理器（推荐）

nvm（Node Version Manager）：

# 安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 重新加载终端或运行
source ~/.bashrc

# 安装最新LTS版本
nvm install --lts

# 使用特定版本
nvm use 18.17.0

# 查看已安装版本
nvm list

# 设置默认版本
nvm alias default 18.17.0

Windows用户可以使用nvm-windows：

# 下载并安装nvm-windows
# https://github.com/coreybutler/nvm-windows/releases

# 安装Node.js
nvm install 18.17.0
nvm use 18.17.0

验证安装

# 检查Node.js版本
node --version
# 或
node -v

# 检查npm版本
npm --version
# 或
npm -v

npm配置

# 查看npm配置
npm config list

# 设置npm镜像源（中国用户推荐）
npm config set registry https://registry.npmmirror.com

# 设置全局安装路径
npm config set prefix "C:\Users\YourName\AppData\Roaming\npm"

# 查看全局安装路径
npm config get prefix

# 清除npm缓存
npm cache clean --force

包管理器

npm（Node Package Manager）

npm是Node.js的默认包管理器，用于安装、管理和发布JavaScript包。

基本命令

# 初始化项目
npm init
npm init -y  # 使用默认配置

# 安装依赖
npm install package-name
npm install package-name@version  # 安装特定版本
npm install package-name --save-dev  # 安装为开发依赖
npm install -g package-name  # 全局安装

# 安装所有依赖
npm install

# 更新依赖
npm update
npm update package-name

# 卸载依赖
npm uninstall package-name
npm uninstall -g package-name  # 卸载全局包

# 查看已安装包
npm list
npm list -g  # 查看全局包

# 查看包信息
npm info package-name

# 运行脚本
npm run script-name
npm start  # 运行start脚本
npm test   # 运行test脚本

package.json文件

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "A sample JavaScript project",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "jest",
    "build": "webpack --mode production",
    "lint": "eslint src/"
  },
  "keywords": ["javascript", "node"],
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "express": "^4.18.2",
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "nodemon": "^3.0.1",
    "jest": "^29.6.2",
    "eslint": "^8.45.0"
  },
  "engines": {
    "node": ">=16.0.0",
    "npm": ">=8.0.0"
  }
}

Yarn

Yarn是Facebook开发的另一个JavaScript包管理器，提供了更快的安装速度和更好的依赖管理。

安装Yarn

# 使用npm安装
npm install -g yarn

# 验证安装
yarn --version

Yarn基本命令

# 初始化项目
yarn init
yarn init -y

# 安装依赖
yarn add package-name
yarn add package-name@version
yarn add package-name --dev
yarn global add package-name

# 安装所有依赖
yarn install
# 或简写
yarn

# 更新依赖
yarn upgrade
yarn upgrade package-name

# 移除依赖
yarn remove package-name
yarn global remove package-name

# 运行脚本
yarn run script-name
yarn start
yarn test

pnpm

pnpm是一个快速、节省磁盘空间的包管理器，通过硬链接和符号链接来避免重复安装相同的包。

安装pnpm

# 使用npm安装
npm install -g pnpm

# 或使用官方安装脚本
curl -fsSL https://get.pnpm.io/install.sh | sh -

# 验证安装
pnpm --version

pnpm基本命令

# 初始化项目
pnpm init

# 安装依赖
pnpm add package-name
pnpm add package-name -D  # 开发依赖
pnpm add package-name -g  # 全局安装

# 安装所有依赖
pnpm install
# 或简写
pnpm i

# 更新依赖
pnpm update

# 移除依赖
pnpm remove package-name

# 运行脚本
pnpm run script-name
pnpm start

代码编辑器和IDE

Visual Studio Code（推荐）

VS Code是目前最受欢迎的JavaScript开发编辑器，提供了丰富的功能和扩展生态。

安装VS Code

访问VS Code官网
下载适合你操作系统的版本
安装并启动

VS Code配置

settings.json配置：

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always"
}

其他编辑器选择

WebStorm

JetBrains开发的专业JavaScript IDE
强大的代码分析和重构功能
内置调试器和版本控制
付费软件，但功能非常强大

Sublime Text

轻量级、快速的文本编辑器
丰富的插件生态
支持多种编程语言

Atom

GitHub开发的开源编辑器
高度可定制
注：GitHub已宣布停止维护

浏览器开发者工具

Chrome DevTools

Chrome开发者工具是前端开发的重要工具，提供了调试、性能分析、网络监控等功能。

打开DevTools

Windows/Linux: F12 或 Ctrl + Shift + I
macOS: Cmd + Option + I
右键页面选择”检查”或”检查元素”

主要面板

Elements（元素）：查看和编辑HTML/CSS
Console（控制台）：执行JavaScript代码，查看日志
Sources（源代码）：调试JavaScript代码
Network（网络）：监控网络请求
Performance（性能）：分析页面性能
Memory（内存）：分析内存使用
Application（应用）：管理存储、Service Worker等

Console面板使用

// 基本输出
console.log('Hello, World!');
console.info('这是信息');
console.warn('这是警告');
console.error('这是错误');

// 格式化输出
console.log('%c这是彩色文本', 'color: red; font-size: 20px;');

// 表格输出
const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 }
];
console.table(users);

// 分组输出
console.group('用户信息');
console.log('姓名: Alice');
console.log('年龄: 30');
console.groupEnd();

// 计时
console.time('操作耗时');
// 执行一些操作
console.timeEnd('操作耗时');

// 断言
console.assert(1 === 2, '1不等于2');

// 计数
console.count('点击次数');
console.count('点击次数');

调试技巧

// 设置断点
function calculateSum(a, b) {
  debugger; // 程序会在这里暂停
  const result = a + b;
  return result;
}

// 条件断点（在DevTools中设置）
for (let i = 0; i < 100; i++) {
  // 在DevTools中设置条件：i === 50
  console.log(i);
}

// 监控变量变化
let count = 0;
function increment() {
  count++; // 可以在DevTools中监控count变量
}

构建工具

Webpack

Webpack是一个现代JavaScript应用程序的静态模块打包器。

安装和基本配置

# 安装webpack
npm install --save-dev webpack webpack-cli

# 安装常用loader和plugin
npm install --save-dev babel-loader @babel/core @babel/preset-env
npm install --save-dev css-loader style-loader
npm install --save-dev html-webpack-plugin

webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devServer: {
    static: './dist',
    port: 3000,
    open: true
  }
};

Vite

Vite是一个现代的前端构建工具，提供了极快的开发服务器和优化的生产构建。

创建Vite项目

# 使用npm
npm create vite@latest my-project
cd my-project
npm install
npm run dev

# 使用yarn
yarn create vite my-project
cd my-project
yarn
yarn dev

# 使用pnpm
pnpm create vite my-project
cd my-project
pnpm install
pnpm dev

vite.config.js：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
});

Parcel

Parcel是一个零配置的Web应用打包器。

# 安装Parcel
npm install --save-dev parcel

# 在package.json中添加脚本
{
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  }
}

# 运行开发服务器
npm start

# 构建生产版本
npm run build

代码质量工具

ESLint

ESLint是一个JavaScript代码检查工具，用于发现和修复代码中的问题。

安装和配置

# 安装ESLint
npm install --save-dev eslint

# 初始化配置
npx eslint --init

.eslintrc.js：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
    'indent': ['error', 2],
    'linebreak-style': ['error', 'unix'],
    'quotes': ['error', 'single'],
    'semi': ['error', 'always'],
    'no-unused-vars': 'warn',
    'no-console': 'warn'
  }
};

Prettier

Prettier是一个代码格式化工具，确保代码风格的一致性。

安装和配置

# 安装Prettier
npm install --save-dev prettier

# 安装ESLint和Prettier集成
npm install --save-dev eslint-config-prettier eslint-plugin-prettier

.prettierrc：

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

.prettierignore：

node_modules/
dist/
build/
*.min.js

Husky和lint-staged

用于在Git提交前自动运行代码检查和格式化。

# 安装Husky和lint-staged
npm install --save-dev husky lint-staged

# 初始化Husky
npx husky install

# 添加pre-commit钩子
npx husky add .husky/pre-commit "npx lint-staged"

package.json配置：

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss,md}": [
      "prettier --write"
    ]
  }
}

版本控制

Git基础

# 初始化Git仓库
git init

# 添加远程仓库
git remote add origin https://github.com/username/repository.git

# 基本操作
git add .                    # 添加所有文件到暂存区
git commit -m "提交信息"      # 提交更改
git push origin main         # 推送到远程仓库
git pull origin main         # 拉取远程更改

# 分支操作
git branch feature-branch    # 创建分支
git checkout feature-branch  # 切换分支
git checkout -b new-branch   # 创建并切换分支
git merge feature-branch     # 合并分支
git branch -d feature-branch # 删除分支

.gitignore文件

# 依赖
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# 构建输出
dist/
build/
*.tgz
*.tar.gz

# 环境变量
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# IDE
.vscode/
.idea/
*.swp
*.swo
*~

# 操作系统
.DS_Store
Thumbs.db

# 日志
logs
*.log

# 临时文件
*.tmp
*.temp

项目结构最佳实践

基本项目结构

my-project/
├── src/
│   ├── components/
│   ├── utils/
│   ├── styles/
│   ├── assets/
│   └── index.js
├── public/
│   └── index.html
├── tests/
│   └── __tests__/
├── docs/
├── .gitignore
├── .eslintrc.js
├── .prettierrc
├── package.json
├── README.md
└── webpack.config.js

环境配置

.env文件：

# 开发环境
NODE_ENV=development
API_URL=http://localhost:3001
DEBUG=true

# 生产环境（.env.production）
NODE_ENV=production
API_URL=https://api.example.com
DEBUG=false

使用环境变量：

// 在Node.js中
const apiUrl = process.env.API_URL || 'http://localhost:3000';
const isDebug = process.env.DEBUG === 'true';

// 在前端项目中（需要构建工具支持）
const apiUrl = import.meta.env.VITE_API_URL; // Vite
const apiUrl = process.env.REACT_APP_API_URL; // Create React App

本章总结

本章详细介绍了JavaScript开发环境的搭建和工具使用：

Node.js安装：学习了多种安装方式和版本管理
包管理器：掌握了npm、Yarn、pnpm的使用
开发工具：了解了VS Code等编辑器的配置和使用
浏览器工具：学习了Chrome DevTools的使用技巧
构建工具：介绍了Webpack、Vite、Parcel等现代构建工具
代码质量：配置了ESLint、Prettier等代码质量工具
版本控制：掌握了Git的基本使用和项目配置

良好的开发环境和工具链是高效开发的基础，这些工具将在后续的学习和实际开发中发挥重要作用。

下一章我们将学习JavaScript的基本语法和语言特性。

📂 分类导航

▶ 学与练
- ▶ 软件技术基础
  - ▶ 操作系统技术
    - Linux实战
    - ▶ Linux技巧
      - debug-remote-api.md
  - ▶ 容器化与编排
    - Docker实战
    - ▶ Docker高级
- ▶ 前端开发技术
  - ▶ 框架与库
    - js
    - vue
  - ▶ 前端生态
    - bootstrap
    - vue-ssr
- ▶ 后端开发技术
  - ▶ 编程语言
    - ▶ Java
    - ▶ Go
      - go-server.md
      - mini.md
    - Rust
    - Python
    - csharp
  - ▶ 中间件
    - redis
    - ▶ minio
      - minio.md
    - elasticsearch
    - kafka
    - elk
    - caddy
  - ▶ 数据库
    - MySQL
    - SQLServer
    - ▶ Dameng
      - sql.md
    - clickhouse
- ▶ 数据开发与运维
  - ▶ 数据开发
    - hadoop
  - ▶ 运维开发
    - ▶ CI/CD
      - jenkins
    - ▶ 自动化
      - allinssl.md
    - ▶ 日志处理
      - elk
    - ▶ 监控
- 软件速学教程
▶ 软件园
- AI智能体与应用
- 开发工具与环境
- AI 开发和编排
- 业务与生产力应用
- 数据和中间件
▶ 工具箱
- 内容管理
- 编码解码
- ▶ 系统监控
  - miaotixing.md
- ▶ 日常工具
- 工具命令
- 使用教程

📚 开发环境搭建与工具

Node.js安装与配置

什么是Node.js

安装Node.js

方法1：官方安装包

方法2：使用包管理器

方法3：使用版本管理器（推荐）

验证安装

npm配置

包管理器

npm（Node Package Manager）

基本命令

package.json文件

Yarn

安装Yarn

Yarn基本命令

pnpm

安装pnpm

pnpm基本命令

代码编辑器和IDE

Visual Studio Code（推荐）

安装VS Code

推荐扩展

VS Code配置

其他编辑器选择

WebStorm

Sublime Text

Atom

浏览器开发者工具

Chrome DevTools

打开DevTools

主要面板

Console面板使用

调试技巧

构建工具

Webpack

安装和基本配置

Vite

创建Vite项目

Parcel

代码质量工具

ESLint

安装和配置

Prettier

安装和配置

Husky和lint-staged

版本控制

Git基础

.gitignore文件

项目结构最佳实践

基本项目结构

环境配置

本章总结

📂 分类导航

📰 最新文章