工程化实践(Engineering)MOC

前端工程化实践,包括项目结构、代码规范、模块化等。

学习路径

  • 📖 入门:项目结构、代码规范基础
  • 🚀 进阶:模块化、国际化、权限管理
  • 💡 高级:脚手架系统构建、工程化最佳实践

工程化实践与 构建工具 配合使用,共同构建完整的开发流程。代码规范与 测试 配合,保障代码质量。


📚 知识体系

1. 项目结构与规范(Project Structure & Standards)

项目结构设计和代码规范实践。

项目结构

  • 项目脚手架与目录结构(待整理)— 项目结构设计(配合 构建工具 使用)

代码规范

  • 代码规范(ESLint/Prettier)(待整理)— 代码规范与格式化(配合 测试 使用,详见 静态分析

2. 模块化与优化(Modularization & Optimization)

代码模块化和性能优化实践。

模块化

  • 模块化与分包(code-splitting/lazy)(待整理)— 代码分割与懒加载(详见 性能优化

3. 国际化与多租户(i18n & Multi-tenancy)

国际化方案和权限管理系统。

国际化

  • 国际化i18n / L10n(待整理)— 国际化方案

权限管理

  • 权限与多租户(待整理)— 权限管理系统(可参考 架构设计

4. 脚手架系统(Scaffold System)

从零构建前端脚手架系统。

脚手架


5. 开发工具(Development Tools)

开发环境配置和工具使用。

编辑器配置


🎯 学习路径

阶段一:基础入门

目标:掌握项目结构和代码规范

学习顺序

  1. 项目脚手架与目录结构(待整理)
  2. 代码规范(ESLint/Prettier)(待整理)

学习检查点

  • ✅ 能够设计合理的项目目录结构
  • ✅ 能够配置 ESLint 和 Prettier
  • ✅ 理解代码规范的重要性

阶段二:进阶实践

目标:掌握模块化和国际化方案

学习顺序

  1. 模块化与分包(待整理)
  2. 国际化i18n / L10n(待整理)
  3. 权限与多租户(待整理)

学习检查点

  • ✅ 能够实现代码分割和懒加载
  • ✅ 能够实现国际化方案
  • ✅ 能够设计权限管理系统

阶段三:高级应用

目标:构建完整的脚手架系统

学习顺序

  1. 脚手架知识体系
    • 脚手架核心概念与原理
    • 从零开始构建脚手架
    • 模板系统实现
    • 插件系统实现
    • 远程模板支持
    • 发布与扩展

学习检查点

  • ✅ 能够从零构建一个完整的脚手架系统
  • ✅ 能够实现模板系统和插件机制
  • ✅ 能够发布脚手架到 npm

🔗 相关链接

前置知识

相关主题

  • 测试 — 测试实践(配合代码规范使用)
  • 性能优化 — 性能优化(配合模块化使用)
  • 架构设计 — 架构设计(配合权限管理使用)

进阶学习


📌 使用说明

目录结构

工程化/
├── !MOC-工程化.md
├── 项目脚手架与目录结构.md(待整理)
├── 代码规范.md(待整理)
├── 模块化与分包.md(待整理)
├── 国际化i18n-L10n.md(待整理)
├── 权限与多租户.md(待整理)
├── 脚手架/
│   ├── !MOC-脚手架.md
│   ├── 01-脚手架核心概念与原理.md
│   ├── 02-从零开始构建脚手架.md
│   ├── 03-模板系统实现.md
│   ├── 04-插件系统实现.md
│   ├── 05-远程模板支持.md
│   └── 06-发布与扩展.md
└── 开发工具/
    └── VSCode配置与技巧.md

文件命名规范

  • MOC 文件!MOC-工程化.md
  • 普通文件:使用中划线分隔,如 项目脚手架与目录结构.md

📖 学习资源


最后更新:2025
维护规范:每次新增笔记后,在对应 MOC 中加入链接


工程化 代码规范 前端工程 脚手架