模块化与工程化入门 · 前端开发入门

第 13 章 · 模块化与工程化入门

本章目标：用 npm、Vite 将 academy-demo 从「多个 HTML 文件夹」升级为可开发、可构建、可部署的现代前端工程，理解目录结构、环境变量与静态站发布流程。

前置：第 11～12 章；本机安装 Node.js 18+。

13.1 为什么需要工程化

手写多页面	工程化（Vite）
无热更新，改代码需手动刷新	HMR 毫秒级反馈
脚本全局污染	ES Module 作用域隔离
无法 Tree Shaking	按需打包，体积更小
环境配置写死在代码里	`.env` 分环境注入
上线前手动压缩	`build` 一键产出 `dist/`

行业案例 · 贤紫优选商城：学员作品站早期为静态 HTML 合集，维护 40+ 页面后样式不一致、脚本重复率达 60%。统一迁入 Vite monorepo 后，共享组件库 + CI 自动部署至对象存储，发布从 2h 人工 FTP 变为 3min 流水线。

13.2 初始化 academy-demo 工程

cd academy-demo
npm create vite@latest . -- --template vanilla
npm install
npm run dev

生成结构：

academy-demo/
├── index.html          # 入口 HTML（Vite 根）
├── package.json
├── vite.config.js
├── public/             # 原样复制到 dist 根（favicon、mock）
│   └── mock/
├── src/
│   ├── main.js         # 入口脚本
│   ├── style.css
│   ├── api/
│   │   └── client.js
│   ├── pages/
│   │   ├── home.js
│   │   └── todo.js
│   └── components/
│       └── course-card.js
└── .env.development

目录	职责
`public/`	不参与打包的静态资源
`src/`	源码，ES Module
`dist/`	`npm run build` 产出（勿提交 Git）
`node_modules/`	依赖（勿提交 Git）

13.3 package.json 与 npm

{
  "name": "academy-demo",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^6.0.0"
  }
}

命令	作用
`npm install`	安装 `package.json` 依赖
`npm install dayjs`	添加生产依赖
`npm install -D eslint`	添加开发依赖
`npm run dev`	启动开发服务器
`npm run build`	生产构建
`npm run preview`	本地预览 dist

版本锁定：提交 package-lock.json，保证团队依赖一致。

13.4 Vite 配置要点

// vite.config.js
import { defineConfig, loadEnv } from 'vite';
import { resolve } from 'path';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');

  return {
    root: '.',
    base: env.VITE_BASE_PATH || '/',
    server: {
      port: 5173,
      open: true,
      proxy: {
        '/api': {
          target: env.VITE_API_PROXY || 'http://127.0.0.1:8000',
          changeOrigin: true,
        },
      },
    },
    build: {
      outDir: 'dist',
      assetsDir: 'assets',
      sourcemap: true,
      rollupOptions: {
        input: {
          main: resolve(__dirname, 'index.html'),
          todo: resolve(__dirname, 'todo.html'),
        },
      },
    },
  };
});

配置项	说明
`base`	部署子路径，如 `/academy-demo/`
`server.proxy`	开发环境 API 转发
`build.outDir`	构建输出目录
`rollupOptions.input`	多页面入口

13.5 环境变量

Vite 仅暴露以 VITE_ 开头的变量到客户端：

# .env.development
VITE_API_BASE=/api/academy
VITE_API_PROXY=http://127.0.0.1:8000
VITE_APP_TITLE=academy-demo 开发环境

# .env.production
VITE_API_BASE=https://mall.example.com/api/academy
VITE_APP_TITLE=贤紫技术学院
VITE_BASE_PATH=/academy-demo/