Jacky's blog
Jacky
2023-06-29
目录

Web 开发工具完整指南

# 🛠️ Web 开发工具完整指南

# 📋 目录

# 包管理器

# npm (Node Package Manager)

官方文档: npm (opens new window)
详细教程: npm 完整指南

# 核心特点

  • 官方工具: Node.js 的默认包管理器，随 Node.js 一起安装
  • 生态系统: JavaScript 社区最大的包管理生态系统
  • 版本管理: 通过 package.json 和 package-lock.json 管理依赖版本
  • 命令行工具: 提供完整的包安装、更新、卸载功能

# 常用命令

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

# 安装依赖
npm install <package>
npm install <package> --save-dev
npm install <package> -g

# 更新依赖
npm update
npm update <package>

# 卸载依赖
npm uninstall <package>

# 查看依赖
npm list
npm list --depth=0

# 运行脚本
npm run <script>
npm start
npm test

# 清理缓存
npm cache clean --force
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 工作机制

项目结构
├── package.json          # 依赖声明
├── package-lock.json     # 锁定版本
└── node_modules/         # 依赖存储
    ├── package-a/
    ├── package-b/
    └── ...
1
2
3
4
5
6
7

# npx (Node Package Execute)

详细教程: npx 完整指南

# 核心特点

  • 无需安装: 直接运行 npm 包，无需全局安装
  • 版本指定: 可以运行特定版本的包
  • 临时使用: 运行完毕后自动清理
  • 脚本执行: 执行 node_modules/.bin 中的命令

# 使用场景

# 创建项目（无需全局安装）
npx create-react-app my-app
npx create-vite my-vue-app

# 运行特定版本
npx [email protected] --version

# 执行本地二进制文件
npx eslint .
npx prettier --write .

# 临时测试工具
npx http-server
npx json-server --watch db.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# npx vs npm install -g

# 传统方式（全局安装）
npm install -g create-react-app
create-react-app my-app

# npx 方式（临时运行）
npx create-react-app my-app

# 优势：
# 1. 不占用全局空间
# 2. 始终使用最新版本
# 3. 避免版本冲突
1
2
3
4
5
6
7
8
9
10
11

# pnpm (Performant npm)

官方文档: pnpm (opens new window)

# 核心特点

  • 节省空间: 使用符号链接，避免重复下载
  • 速度快: 安装速度通常比 npm 快 2-3 倍
  • 严格依赖: 避免幽灵依赖问题
  • Monorepo 支持: 原生支持 Monorepo 工作区

# 安装

# 使用 npm 安装
npm install -g pnpm

# 使用 npm 安装指定版本
npm install -g [email protected]

# 使用脚本安装（推荐）
curl -fsSL https://get.pnpm.io/install.sh | sh -

# macOS 使用 Homebrew
brew install pnpm
1
2
3
4
5
6
7
8
9
10
11

# 常用命令

# 初始化项目
pnpm init

# 安装依赖
pnpm install
pnpm add <package>
pnpm add <package> -D
pnpm add <package> -g

# 更新依赖
pnpm update
pnpm update <package>

# 卸载依赖
pnpm remove <package>

# 运行脚本
pnpm run <script>
pnpm start
pnpm test

# 查看依赖
pnpm list
pnpm list --depth=0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 工作机制

全局存储（~/.pnpm-store）
├── [email protected]/
├── [email protected]/
└── ...

项目结构
├── package.json
├── pnpm-lock.yaml
└── node_modules/
    └── .pnpm/              # 虚拟存储
        ├── [email protected]/
        └── [email protected]/
1
2
3
4
5
6
7
8
9
10
11
12

# 性能对比

指标 npm yarn pnpm
安装速度 基准 快 30% 快 2-3倍
磁盘占用 100% 100% 30-50%
依赖隔离 ❌ ❌ ✅
Monorepo ⚠️ ✅ ✅

# Yarn

官方文档: Yarn (opens new window)

# 核心特点

  • 快速: 并行安装，缓存机制
  • 可靠: 使用 yarn.lock 锁定版本
  • 安全: 校验包完整性
  • 离线模式: 支持离线安装

# 常用命令

# 初始化项目
yarn init

# 安装依赖
yarn
yarn add <package>
yarn add <package> --dev
yarn global add <package>

# 更新依赖
yarn upgrade
yarn upgrade <package>

# 卸载依赖
yarn remove <package>

# 运行脚本
yarn run <script>
yarn start
yarn test
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 构建工具

# Webpack

官方文档: Webpack (opens new window)

# 核心功能

  • 模块打包: 处理 JavaScript 模块（ES6、CommonJS、AMD）及其他资源
  • 代码分割: 将代码分割成多个 bundle，按需加载，减少初始加载时间
  • 热模块替换（HMR）: 开发过程中无需刷新页面即可替换、更新模块
  • Tree Shaking: 移除未使用的代码，减小打包体积
  • Loaders 和 Plugins: 使用 loaders 处理非 JavaScript 文件（如 CSS、图片），使用 plugins 扩展功能

# 基础配置

// 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.[contenthash].js',
    clean: true
  },
  
  // Loaders 配置
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset/resource'
      }
    ]
  },
  
  // Plugins 配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  
  // 开发服务器配置
  devServer: {
    static: './dist',
    hot: true,
    port: 3000
  },
  
  // 优化配置
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

# 常用命令

# 开发模式
npx webpack serve --mode development

# 生产构建
npx webpack --mode production

# 分析打包结果
npx webpack --mode production --profile --json > stats.json
npx webpack-bundle-analyzer stats.json
1
2
3
4
5
6
7
8
9

# 使用场景

  • ✅ 复杂的企业级应用
  • ✅ 需要精细化配置的项目
  • ✅ 多页面应用（MPA）
  • ✅ 需要支持老旧浏览器

# Vite

官方文档: Vite (opens new window)

# 核心特点

  • 快速冷启动: 使用原生 ES 模块，无需打包即可启动
  • 即时热更新: 基于 ESM 的 HMR，更新速度极快
  • 按需编译: 只编译当前需要的模块
  • 多框架支持: 支持 Vue、React、Svelte 等
  • 开箱即用: 零配置启动，内置优化

# 基础配置

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import react from '@vitejs/plugin-react'

export default defineConfig({
  // 插件配置
  plugins: [vue(), react()],
  
  // 开发服务器配置
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  
  // 构建配置
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router']
        }
      }
    }
  },
  
  // 路径别名
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 常用命令

# 创建项目
npm create vite@latest my-app
pnpm create vite my-app

# 开发模式
npm run dev
vite

# 生产构建
npm run build
vite build

# 预览构建结果
npm run preview
vite preview
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 使用场景

  • ✅ 现代浏览器项目
  • ✅ Vue 3 / React 新项目
  • ✅ 快速原型开发
  • ✅ 追求开发体验的项目

# Vite vs Webpack

特性 Vite Webpack
冷启动速度 ⚡ 极快（秒级） 🐢 较慢（分钟级）
热更新速度 ⚡ 即时 🐢 较慢
配置复杂度 ✅ 简单 ❌ 复杂
浏览器支持 现代浏览器 全部浏览器
生态成熟度 🆕 新 ✅ 成熟
打包优化 Rollup 自身

# Gulp

官方文档: Gulp (opens new window)

# 核心特点

  • 任务型构建工具: 基于流（Stream）的任务运行器
  • 配置驱动: 通过 gulpfile.js 定义任务
  • 插件生态: 庞大的插件系统
  • 代码优于配置: 使用 JavaScript 编写任务

# 基础配置

// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');
const imagemin = require('gulp-imagemin');

// 编译 Sass
gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css'));
});

// 压缩 JavaScript
gulp.task('scripts', function() {
  return gulp.src('src/js/**/*.js')
    .pipe(concat('bundle.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

// 优化图片
gulp.task('images', function() {
  return gulp.src('src/images/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});

// 监听文件变化
gulp.task('watch', function() {
  gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
  gulp.watch('src/js/**/*.js', gulp.series('scripts'));
});

// 默认任务
gulp.task('default', gulp.series('sass', 'scripts', 'images'));

// 开发任务
gulp.task('dev', gulp.series('default', 'watch'));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 常用命令

# 运行默认任务
gulp

# 运行指定任务
gulp sass
gulp scripts

# 开发模式
gulp dev
1
2
3
4
5
6
7
8
9

# 使用场景

  • ✅ 简单的构建流程
  • ✅ 文件处理任务（压缩、合并、转换）
  • ✅ 自动化工作流
  • ❌ 不适合复杂的模块打包

# 编译器与转译器

# TypeScript Compiler (tsc)

官方文档: TypeScript (opens new window)

# 核心功能

  • 类型检查: 静态类型检查，提前发现错误
  • 代码转译: 将 TypeScript 编译为 JavaScript
  • 语法降级: 支持将新语法转译为旧版本
  • 声明文件生成: 生成 .d.ts 类型声明文件

# 安装与初始化

# 全局安装
npm install -g typescript

# 项目安装
npm install -D typescript

# 初始化配置文件
npx tsc --init
1
2
3
4
5
6
7
8

# 配置文件

// tsconfig.json
{
  "compilerOptions": {
    // 目标 JavaScript 版本
    "target": "ES2020",
    // 模块系统
    "module": "ESNext",
    // 输出目录
    "outDir": "./dist",
    // 根目录
    "rootDir": "./src",
    // 启用严格模式
    "strict": true,
    // 生成声明文件
    "declaration": true,
    // 生成 source map
    "sourceMap": true,
    // 模块解析策略
    "moduleResolution": "node",
    // ES 模块互操作
    "esModuleInterop": true,
    // 跳过库检查
    "skipLibCheck": true,
    // 路径别名
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 常用命令

# 编译项目
tsc

# 监听模式
tsc --watch
tsc -w

# 编译单个文件
tsc src/index.ts

# 指定配置文件
tsc --project tsconfig.build.json
tsc -p tsconfig.build.json

# 只进行类型检查
tsc --noEmit

# 查看版本
tsc --version
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 实用脚本

#!/bin/bash
# 快速运行 TypeScript 文件
# 使用: ./runts.sh src/index.ts

if [ $# -eq 0 ]; then
  echo "Please provide a TypeScript file path as an argument."
  exit 1
fi

# 执行编译
tsc

# 将 src 替换为 dist，将 .ts 替换为 .js
file_path=$(echo $1 | sed 's/src/dist/; s/\.ts/\.js/g')

# 检查文件是否存在
if [ ! -f "$file_path" ]; then
  echo "File does not exist: $file_path"
  exit 1
fi

# 使用 Node.js 执行文件
node $file_path
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 使用场景

  • ✅ 大型项目
  • ✅ 团队协作
  • ✅ 需要类型安全的项目
  • ✅ 代码重构频繁的项目

# Babel

官方文档: Babel (opens new window)

# 核心功能

  • JavaScript 编译器: 将新版本 JavaScript 转换为向后兼容的版本
  • 语法转换: 支持最新的 ECMAScript 语法
  • Polyfill: 添加浏览器不支持的新 API
  • 插件系统: 高度可扩展的插件机制

# 安装与配置

# 安装核心包
npm install -D @babel/core @babel/cli

# 安装预设
npm install -D @babel/preset-env @babel/preset-react @babel/preset-typescript

# 安装 Polyfill
npm install core-js regenerator-runtime
1
2
3
4
5
6
7
8

# 配置文件

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        // 目标环境
        targets: {
          browsers: ['> 1%', 'last 2 versions', 'not dead'],
          node: '14'
        },
        // 使用方式
        useBuiltIns: 'usage',
        // core-js 版本
        corejs: 3
      }
    ],
    '@babel/preset-react',
    '@babel/preset-typescript'
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator'
  ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 常用命令

# 编译文件
npx babel src/index.js -o dist/index.js

# 编译目录
npx babel src -d dist

# 监听模式
npx babel src -d dist --watch

# 生成 source map
npx babel src -d dist --source-maps
1
2
3
4
5
6
7
8
9
10
11

# 使用场景

  • ✅ 需要支持老旧浏览器
  • ✅ 使用最新 JavaScript 特性
  • ✅ React/JSX 项目
  • ✅ TypeScript 项目（配合使用）

# 开发服务器

# Vite Dev Server

# 启动开发服务器
vite

# 指定端口
vite --port 3000

# 自动打开浏览器
vite --open

# 指定 host
vite --host 0.0.0.0
1
2
3
4
5
6
7
8
9
10
11

# Webpack Dev Server

# 启动开发服务器
npx webpack serve

# 指定配置文件
npx webpack serve --config webpack.dev.js

# 指定端口
npx webpack serve --port 8080

# 热更新
npx webpack serve --hot
1
2
3
4
5
6
7
8
9
10
11

# Monorepo 工具

Monorepo（Monolithic Repository）是一种软件开发策略，将多个项目的代码存储在同一个代码仓库中。Monorepo 工具就是用来管理这种代码仓库的工具。

# Turborepo

官方文档: Turborepo (opens new window)

# 核心特点

  • 智能构建系统: 优化 JavaScript 和 TypeScript 代码库
  • 缓存机制: 本地和远程缓存，避免重复构建
  • 并行执行: 最大化利用多核 CPU
  • 增量构建: 只构建变更的部分

# 安装与配置

# 安装
npm install turbo -D

# 初始化配置
npx turbo gen workspace
1
2
3
4
5

# 配置文件

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**"]
    },
    "test": {
      "dependsOn": ["build"],
      "outputs": []
    },
    "lint": {
      "outputs": []
    },
    "dev": {
      "cache": false
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 常用命令

# 运行所有包的构建
turbo run build

# 运行测试
turbo run test

# 开发模式
turbo run dev

# 清除缓存
turbo run build --force
1
2
3
4
5
6
7
8
9
10
11

# Lerna

官方文档: Lerna (opens new window)

# 核心特点

  • Monorepo 管理: 管理多包仓库
  • 版本管理: 统一或独立版本管理
  • 依赖管理: 自动链接包依赖
  • 发布管理: 批量发布包

# 常用命令

# 初始化
npx lerna init

# 安装依赖
npx lerna bootstrap

# 运行脚本
npx lerna run build
npx lerna run test

# 发布
npx lerna publish
1
2
3
4
5
6
7
8
9
10
11
12

# 其他工具

# node-gyp

官方文档: node-gyp (opens new window)

# 什么是 node-gyp

node-gyp (Generate Your Projects) 是 Node.js 生态系统中不可或缺的一部分，它提供了一个平台，让 JavaScript 开发者能够轻松地集成 C 和 C++ 编写的代码。

# 为什么需要 node-gyp

Node.js 主要使用 JavaScript，一种解释型语言，但某些功能（如性能密集型任务或系统级操作）最好使用编译型语言如 C 或 C++ 来实现。node-gyp 就是连接这两个世界的桥梁，它让 Node.js 能够执行这些编译型语言编写的模块。

# 工作原理

当开发者创建一个需要 C/C++ 库的 Node.js 模块时，node-gyp 帮助配置和构建这些本地依赖。它使用 gyp（Generate Your Projects），一个 Google 开发的构建工具，用于生成项目文件，这些文件随后可被编译器如 gcc、clang 等用于构建最终的本地模块。

# 安装依赖

# macOS
xcode-select --install

# Windows
npm install --global windows-build-tools

# Linux
sudo apt-get install build-essential
1
2
3
4
5
6
7
8

# PHP

官方文档: PHP (opens new window)

# 安装

# macOS
brew install php

# 查看版本
php --version

# 启动内置服务器
php -S localhost:8000
1
2
3
4
5
6
7
8

# 工具对比

# 包管理器对比

特性 npm yarn pnpm
速度 ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
磁盘占用 高 高 低
依赖隔离 ❌ ❌ ✅
Monorepo ⚠️ ✅ ✅
生态成熟度 ✅ ✅ ⚠️
学习成本 低 低 中

# 构建工具对比

特性 Webpack Vite Gulp
启动速度 慢 极快 中
配置复杂度 高 低 中
适用场景 企业级 现代项目 简单任务
生态成熟度 ✅ ⚠️ ✅
浏览器支持 全部 现代 N/A

# 最佳实践

# 1. 包管理器选择

# 个人项目或小团队
npm  # 简单、稳定

# 追求性能和磁盘空间
pnpm  # 快速、节省空间

# Monorepo 项目
pnpm + Turborepo  # 最佳组合
1
2
3
4
5
6
7
8

# 2. 构建工具选择

# 新项目（Vue 3 / React）
Vite  # 开发体验极佳

# 企业级项目（复杂配置）
Webpack  # 成熟、可控

# 简单构建任务
Gulp  # 轻量、灵活
1
2
3
4
5
6
7
8

# 3. 项目配置示例

// package.json
{
  "name": "my-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .ts,.tsx",
    "test": "vitest",
    "format": "prettier --write ."
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "@vitejs/plugin-react": "^4.0.0",
    "typescript": "^5.0.0",
    "vite": "^4.3.0",
    "vitest": "^0.31.0",
    "eslint": "^8.42.0",
    "prettier": "^2.8.8"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 4. 开发工作流

# 1. 初始化项目
pnpm create vite my-app --template react-ts

# 2. 安装依赖
cd my-app
pnpm install

# 3. 开发
pnpm dev

# 4. 构建
pnpm build

# 5. 预览
pnpm preview
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 学习资源

# 官方文档

# 推荐工具

# 总结

Web 开发工具生态系统非常丰富，选择合适的工具可以显著提升开发效率：

  1. 包管理器: pnpm 是当前最佳选择，速度快且节省空间
  2. 构建工具: Vite 适合新项目，Webpack 适合企业级应用
  3. 编译器: TypeScript + Babel 是现代项目的标配
  4. Monorepo: Turborepo + pnpm 是最佳组合

根据项目需求和团队熟悉度选择合适的工具组合，才能最大化开发效率！🚀

#tool#tutorial#Web
上次更新: 2026/10/18, 22:14:48
web
Node.js 命令行工具完整指南

← Node.js 命令行工具完整指南→

最近更新
01
Codex 使用与会话管理指南
10-17
02
Tailscale 入门：让自己的设备跨网络互联
10-15
03
GitHub CLI（gh）工作流与 CI 排查
10-08
更多文章>
Theme by Vdoing | Copyright © 2019-2026 Jacky | MIT License