编程开发

前端零基础教程(五)：前端工程化与工具链

学习前端工程化，掌握构建工具、包管理、代码规范、测试等现代前端开发工具

前端零基础教程(五)：前端工程化与工具链

前端工程化是现代前端开发的重要组成部分，通过工具和流程提高开发效率和代码质量。本文将从零开始，系统学习前端工程化的核心知识。

第一章：前端工程化基础认知（第 1 周）

1.1 什么是前端工程化

工程化的定义

  • 自动化流程：自动化构建、测试、部署
  • 代码规范：统一的代码风格和规范
  • 模块化开发：代码模块化、组件化
  • 性能优化：代码压缩、打包优化

工程化的优势

  • 提高效率：自动化重复工作
  • 保证质量：代码检查和测试
  • 便于协作：统一的开发规范
  • 易于维护：清晰的代码结构

1.2 工程化工具链

核心工具

  • 包管理器：npm、yarn、pnpm
  • 构建工具：Webpack、Vite、Rollup
  • 代码规范：ESLint、Prettier
  • 测试工具：Jest、Vitest
  • 版本控制：Git

第二章：包管理器（第 1 周）

2.1 npm 基础

npm 简介

  • Node Package Manager：Node.js 包管理器
  • 包仓库：npmjs.com 包仓库
  • 依赖管理：管理项目依赖

基本命令 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

# 初始化项目
npm init

# 安装依赖
npm install package-name
npm install package-name --save-dev  # 开发依赖

# 卸载依赖
npm uninstall package-name

# 更新依赖
npm update package-name

# 查看依赖
npm list

# 运行脚本
npm run script-name

2.2 package.json

文件结构 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "项目描述",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.0"
  },
  "devDependencies": {
    "vite": "^4.4.0"
  }
}

2.3 yarn 和 pnpm

yarn 

1
2
3
4
5
6
7
8

# 安装 yarn
npm install -g yarn

# 基本命令
yarn init
yarn add package-name
yarn remove package-name
yarn install

pnpm 

1
2
3
4
5
6
7
8

# 安装 pnpm
npm install -g pnpm

# 基本命令
pnpm init
pnpm add package-name
pnpm remove package-name
pnpm install

第三章：构建工具（第 2 周）

3.1 Vite 基础

Vite 简介

  • 快速构建：基于 ES 模块的快速构建工具
  • 热更新：快速的热模块替换
  • 开箱即用：Vue、React 等框架支持

创建 Vite 项目 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# 创建 Vue 项目
npm create vue@latest my-project

# 创建 React 项目
npm create vite@latest my-react-app -- --template react

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

Vite 配置 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: "dist",
    sourcemap: true,
  },
});

3.2 Webpack 基础

Webpack 简介

  • 模块打包器：打包 JavaScript 模块
  • 代码分割：支持代码分割和懒加载
  • 插件系统：丰富的插件生态

Webpack 配置 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [],
};

第四章：代码规范（第 2-3 周）

4.1 ESLint

ESLint 简介

  • 代码检查：检查 JavaScript 代码错误
  • 代码规范：强制执行代码规范
  • 自动修复：自动修复部分问题

安装和配置 

1
2
3
4
5

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

# 初始化配置
npx eslint --init

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["eslint:recommended", "plugin:vue/vue3-essential"],
  rules: {
    "no-console": "warn",
    "no-unused-vars": "error",
  },
};

4.2 Prettier

Prettier 简介

  • 代码格式化：自动格式化代码
  • 统一风格：统一的代码风格
  • 配置简单：易于配置和使用

安装和配置 

1
2

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

1
2
3
4
5
6
7

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

4.3 EditorConfig

EditorConfig 配置 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

# .editorconfig
root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

第五章：TypeScript（第 3-4 周）

5.1 TypeScript 基础

TypeScript 简介

  • 类型系统：为 JavaScript 添加类型
  • 编译检查：编译时类型检查
  • 更好的 IDE 支持：更好的代码提示

基本类型 

 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

// 基本类型
let name: string = "Tom";
let age: number = 20;
let isActive: boolean = true;

// 数组
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Tom", "Jerry"];

// 对象
interface User {
  name: string;
  age: number;
  email?: string; // 可选属性
}

let user: User = {
  name: "Tom",
  age: 20,
};

// 函数
function greet(name: string): string {
  return "Hello, " + name;
}

5.2 Vue + TypeScript

配置 TypeScript 

1
2

# 安装 TypeScript
npm install --save-dev typescript @vue/cli-plugin-typescript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// 组件中使用 TypeScript
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    name: 'MyComponent',
    props: {
        message: {
            type: String,
            required: true
        }
    },
    setup(props) {
        const count = ref<number>(0);
        return {
            count
        };
    }
});
</script>

第六章：测试（第 4 周）

6.1 Jest

Jest 简介

  • 测试框架：JavaScript 测试框架
  • 断言库：内置断言库
  • Mock 功能：强大的 Mock 功能

基本使用 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// math.test.js
function add(a, b) {
  return a + b;
}

describe("add 函数", () => {
  test("应该返回两个数的和", () => {
    expect(add(1, 2)).toBe(3);
  });
});

6.2 Vitest

Vitest 简介

  • Vite 原生测试：基于 Vite 的测试框架
  • 快速执行：快速执行测试
  • 兼容 Jest：兼容 Jest API

配置和使用 

1
2
3
4
5
6
7
8

// vitest.config.js
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    environment: "jsdom",
  },
});

第七章：Git 版本控制（第 4-5 周）

7.1 Git 基础

基本命令 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 初始化仓库
git init

# 添加文件
git add .
git add file.js

# 提交
git commit -m "提交信息"

# 查看状态
git status

# 查看历史
git log

# 创建分支
git branch feature-branch

# 切换分支
git checkout feature-branch

# 合并分支
git merge feature-branch

7.2 工作流

常用工作流 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

# 克隆仓库
git clone https://github.com/user/repo.git

# 拉取更新
git pull origin main

# 推送代码
git push origin main

# 创建并切换分支
git checkout -b feature-branch

# 提交更改
git add .
git commit -m "功能描述"
git push origin feature-branch

第八章：部署和 CI/CD（第 5 周）

8.1 静态部署

部署到 GitHub Pages 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# 安装 gh-pages
npm install --save-dev gh-pages

# 添加脚本
"scripts": {
    "deploy": "gh-pages -d dist"
}

# 部署
npm run build
npm run deploy

部署到 Vercel 

1
2
3
4
5

# 安装 Vercel CLI
npm install -g vercel

# 部署
vercel

8.2 CI/CD

GitHub Actions 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "18"
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Deploy
        run: npm run deploy

第九章：实战项目（第 5-6 周）

9.1 项目搭建

创建完整项目 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# 创建 Vue 项目
npm create vue@latest my-app

# 安装依赖
cd my-app
npm install

# 添加工具
npm install --save-dev eslint prettier
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

# 配置工具
npx eslint --init
npx prettier --init

9.2 项目结构 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

my-app/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── router/
│   ├── stores/
│   ├── App.vue
│   └── main.js
├── .eslintrc.js
├── .prettierrc
├── .gitignore
├── package.json
├── vite.config.js
└── README.md

第十章：学习资源与总结

10.1 学习资源

官方文档

  • npm 文档：npm 官方文档
  • Vite 文档：Vite 构建工具文档
  • ESLint 文档：代码检查工具文档
  • Git 文档：版本控制文档

10.2 最佳实践

开发流程

  1. 项目初始化：使用脚手架创建项目
  2. 配置工具：配置 ESLint、Prettier 等
  3. 开发功能：按照规范开发
  4. 代码检查：运行 ESLint 检查
  5. 测试：编写和运行测试
  6. 构建部署：构建并部署项目

结语：工程化让开发更专业

前端工程化是现代前端开发的基础，掌握工程化能够：

  1. 提高效率：自动化重复工作
  2. 保证质量：代码检查和测试
  3. 便于协作：统一的开发规范
  4. 易于维护：清晰的代码结构

记住，学习工程化需要：

  • 多实践：通过项目练习使用工具
  • 理解原理：理解工具的工作原理
  • 关注最佳实践：学习行业最佳实践
  • 持续更新：关注新工具和新技术

下一步，我们将通过完整项目实战，综合运用所学知识。继续加油！

Licensed under CC BY-NC-SA 4.0
comments powered by Disqus
© 2020 - 2026 miroliu
使用 Hugo 构建
主题 Stack 由 Jimmy 设计