前端工程化到底在搞什么？从零搭建一个能上线的项目

惊艳的网络

2026-01-03 20:39

阅读 1346

你好！我是做了5年前端的老兵，也带过不少新人。今天写这篇教程，是因为我当初学前端时，光会写 HTML、CSS 和一点点 JavaScript，却完全不知道“工程化”是什么——直到第一次被要求把代码交给测试、部署上线，才意识到：光会写页面远远不够。

这篇文章不讲理论堆砌，只用最直白的语言和可运行的代码，带你走完从前端工具链配置到 GitHub 部署上线的完整流程。哪怕你今天才听说“工程化”这个词，也能跟着做出一个真正能访问的产品。

一、什么是前端工程化？它和“产品”有什么关系？

简单说：工程化就是让前端开发像工厂流水线一样高效、可靠、可重复。

想象你要做一个小产品，比如一个待办事项（Todo）应用。如果只是本地写个 HTML 文件打开看看，那叫“玩具”；但如果你要把它变成别人能用的产品（比如发布到网上），就需要：

自动检查代码错误
把多个文件打包成一个
压缩代码减少加载时间
自动部署到服务器
团队协作时避免代码冲突

这些事，靠手动复制粘贴肯定不行。这就是工程化要解决的问题。

而 GitHub，就是我们存放代码、协作开发、甚至直接部署产品的核心平台。

二、环境准备：5 分钟搭好开发地基

我们需要三个基础工具：

工具	作用	安装方式
Node.js	运行 JavaScript 工具	官网下载安装
npm / pnpm	包管理器（装工具用）	安装 Node 后自带 npm，推荐 `npm install -g pnpm`
Git	版本控制	官网下载

✅ 验证是否成功：

node -v   # 显示版本号如 v18.x
pnpm -v   # 显示版本号
git --version

💡 避坑提示：不要用淘宝镜像或 cnpm，容易出兼容问题。国内用户可用 pnpm，速度更快更稳定。

三、核心概念：工具链不是魔法，只是自动化的脚本

前端工程化的核心是 工具链（Toolchain） —— 一堆工具串起来干活。我们用最主流的组合：

Vite：超快的开发服务器 + 打包器（替代 Webpack）
ESLint：自动检查代码风格和错误
Prettier：自动格式化代码
Git Hooks：提交代码前自动检查
GitHub Pages：免费部署静态网站

下面一步步搭建。

四、实战：从零创建一个可部署的 Todo 应用

第 1 步：用 Vite 创建项目

pnpm create vite todo-app --template vanilla
cd todo-app
pnpm install

这个命令会生成一个超轻量的项目结构：

todo-app/
├── index.html
├── src/
│   ├── main.js
│   └── style.css
└── package.json

运行开发服务器：

pnpm run dev

浏览器打开 http://localhost:5173，就能看到页面了！

第 2 步：加点真实功能（写个简易 Todo）

编辑 src/main.js：

// 简易 Todo 逻辑
const todos = [];
const input = document.getElementById('new-todo');
const list = document.getElementById('todo-list');

function addTodo() {
  if (input.value.trim() === '') return;
  todos.push({ text: input.value, done: false });
  render();
  input.value = '';
}

function toggleDone(index) {
  todos[index].done = !todos[index].done;
  render();
}

function render() {
  list.innerHTML = todos.map((t, i) => `
    <li style="text-decoration: ${t.done ? 'line-through' : 'none'}">
      ${t.text}
      <button onclick="toggleDone(${i})">✓</button>
    </li>
  `).join('');
}

window.addTodo = addTodo;
window.toggleDone = toggleDone;

再改一下 index.html：

<body>
  <h1>我的待办清单</h1>
  <input id="new-todo" placeholder="输入任务..." />
  <button onclick="addTodo()">添加</button>
  <ul id="todo-list"></ul>
  <script type="module" src="/src/main.js"></script>
</body>

现在你的 Todo 应用已经能用了！

第 3 步：加入代码检查（ESLint + Prettier）

安装工具：

pnpm add -D eslint prettier

创建配置文件 .eslintrc.json：

{
  "env": { "browser": true, "es2021": true },
  "rules": {
    "no-unused-vars": "warn",
    "no-undef": "error"
  }
}

创建 .prettierrc：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

再加个脚本到 package.json：

{
  "scripts": {
    "lint": "eslint src/",
    "format": "prettier --write src/"
  }
}

现在你可以运行：

pnpm run lint    # 检查错误
pnpm run format  # 自动美化代码

第 4 步：用 Git 管理代码，连上 GitHub

初始化仓库：

git init
git add .
git commit -m "feat: 初始 Todo 应用"

去 GitHub 新建一个仓库（比如叫 todo-app），然后关联并推送：

git remote add origin https://github.com/你的用户名/todo-app.git
git branch -M main
git push -u origin main

✅ 关键点：所有代码现在安全存放在 GitHub，团队协作或自己换电脑都不怕丢。

第 5 步：一键部署到 GitHub Pages

Vite 默认输出到 dist 目录。先构建：

pnpm run build  # 生成 dist 文件夹

GitHub Pages 可以直接托管 dist 内容。我们用官方推荐方式：

在 GitHub 仓库点 Settings > Pages
Source 选择 Deploy from a branch
Branch 选 main，Folder 选 / (root)
但等等！ 我们需要告诉 GitHub Pages 用 dist 作为根目录

所以，在项目根目录加一个文件 vite.config.js：

import { defineConfig } from 'vite';

export default defineConfig({
  base: '/todo-app/', // 注意：这里要和你的 GitHub 仓库名一致！
});

然后重新构建并提交：

pnpm run build
git add dist -f  # -f 强制添加（因为 .gitignore 默认忽略 dist）
git commit -m "deploy: 静态资源"
git push

回到 GitHub Pages 设置，把 Folder 改为 /dist，保存。

几秒后，你会看到一个 URL，比如：

https://你的用户名.github.io/todo-app/

打开它——你的产品上线了！

🌟 恭喜！你刚刚完成了一个完整的前端工程化流程：开发 → 检查 → 提交 → 部署 → 发布产品。

五、新手常见问题解答

Q1：为什么 base 要设成 `/todo-app/`？

A：因为 GitHub Pages 的路径是 用户名.github.io/仓库名。如果不设 base，JS/CSS 路径会 404。

Q2：每次都要手动 `git add dist` 吗？

A：不用！可以用 gh-pages 包自动部署。但对新手来说，先理解原理更重要。

Q3：能不能不用命令行？

A：可以，但强烈不建议。工程化的核心就是自动化，命令行是必经之路。坚持一周就习惯了。

Q4：团队协作怎么办？

A：所有人 clone 同一个 GitHub 仓库，各自建分支开发，用 Pull Request 合并。这是标准流程。

六、下一步学习建议

你已经掌握了工程化的骨架，接下来可以：

深入 Vite 配置：支持 TypeScript、Vue、React
加入单元测试：用 Vitest 写测试用例
CI/CD 自动化：用 GitHub Actions 实现“推代码就自动部署”
监控与日志：集成 Sentry 捕获线上错误

💬 最后说一句：我当初学的时候，也觉得这些工具又多又乱。但一旦跑通一次完整流程，就会发现——它们不是障碍，而是让你专注做产品的“助手”。

前端工程化不是为了炫技，而是为了让你的代码更快、更稳、更容易变成真正有人用的产品。

现在，去 GitHub 创建你的第一个仓库吧！

标签:产品GitHub

最热最新

暂无评论

为你推荐

暂无相关推荐

前端工程化到底在搞什么？从零搭建一个能上线的项目

一、什么是前端工程化？它和“产品”有什么关系？

二、环境准备：5 分钟搭好开发地基

三、核心概念：工具链不是魔法，只是自动化的脚本

四、实战：从零创建一个可部署的 Todo 应用

第 1 步：用 Vite 创建项目

第 2 步：加点真实功能（写个简易 Todo）

第 3 步：加入代码检查（ESLint + Prettier）

第 4 步：用 Git 管理代码，连上 GitHub

第 5 步：一键部署到 GitHub Pages

五、新手常见问题解答

Q1：为什么 base 要设成 `/todo-app/`？

Q2：每次都要手动 `git add dist` 吗？

Q3：能不能不用命令行？

Q4：团队协作怎么办？

六、下一步学习建议

评论 0

为你推荐

精选内容

前端工程化到底在搞什么？从零搭建一个能上线的项目

一、什么是前端工程化？它和“产品”有什么关系？

二、环境准备：5 分钟搭好开发地基

三、核心概念：工具链不是魔法，只是自动化的脚本

四、实战：从零创建一个可部署的 Todo 应用

第 1 步：用 Vite 创建项目

第 2 步：加点真实功能（写个简易 Todo）

第 3 步：加入代码检查（ESLint + Prettier）

第 4 步：用 Git 管理代码，连上 GitHub

第 5 步：一键部署到 GitHub Pages

五、新手常见问题解答

Q1：为什么 base 要设成 /todo-app/？

Q2：每次都要手动 git add dist 吗？

Q3：能不能不用命令行？

Q4：团队协作怎么办？

六、下一步学习建议

评论 0

为你推荐

相关推荐

精选内容

Q1：为什么 base 要设成 `/todo-app/`？

Q2：每次都要手动 `git add dist` 吗？