概念✅

如何理解前端工程化？

答案

不说人话的话，前端工程化是指利用软件工程的方法，解决前端领域中各种问题的过程。而软件工程参考 wiki 定义

将系统化的、规范的、可度量的方法用于软件的开发、运行和维护的过程，即将工程化应用于软件开发中
说人话的话，前端工程化是指通过工具、流程等一系列手段，优化前端从开发、部署、维护等整个软件生命周期的实践。进一步展开，会涉及如下核心环节
1. 需求阶段
  1. 原型设计 Axure RP、Figama、Sketch
  2. 需求管理 Jira
2. 设计阶段
  1. 接口设计 Swagger
  2. UI Figa、Sketch
3. 构建阶段
  1. 脚手架 Yeoman、Vue-cli、
  2. 构建工具 Webpack、Vite, Babel、 Rollup, RsPack
  3. 包管理工具 npm、yarn、pnpm
  4. 代码质量 Eslint、Prettier
  5. 配置管理 dotenv，git
4. 测试阶段
  1. 单元测试 Jest、Mocha
  2. E2E 测试 Cypress、Puppeteer
  3. 性能测试 Lighthouse
5. 部署阶段
  1. CI/CD Jenkins、Gitlab CI
  2. 部署工具 Docker、K8s
  3. 静态资源 CDN
  4. 服务器 Nginx、Apache
6. 运维阶段
  1. 监控工具 Prometheus、Grafana
  2. 日志工具 ELK

提示

前端工程化涉及的概念和知识极为庞杂，上述只是基于开发流程对常用工具做了简单罗列。但在具体实践中核心差别如下。

团队规模决定了工程化设计差异 大公司更专注于全流程的优化，会有专门的基建团队负责工程化的建设，会根据项目需求、技术栈等因素，形成适用于团队的工程化方案。但是整体的流程还是会涉及上述细节，只是工具封装上会更加定制化和做全盘考量。小公司则更专注于快速迭代，会基于成熟的开源方案做规范化的封装，以提高开发效率。
业务场景决定了工程化的使用差异 对于不同业务场景，在各阶段的工具使用上千差万别，比如涉及命令行开发会使用 yargs、commander、界面开发 Web 端使用 Vue、React, PC 端 Electron、APP 端 Flutter、RN 等

延伸阅读

现代软件工程理解软件工程的核心概念
SWEBOOK IEEE 对软件工程各环节的详细定义
frontend handbook frontend masters 梳理的涉及前端的手册，基本上涵盖了前端工程化的方方面面

面试官视角

该问题可以作为工程化方面的热身问题对面试者工程化整体能力做判断，也可基于面试者的回答，对具体领域进行下探，评价标准

及格对软件工程有基本概念，可以说出一些环节的常用工具
优可以通过生命周期或者其他方式对各环节工具链进行分类，且能够明确说明各分类下涉及工具的使用场景和局限性

什么是前端模块化

答案

模块化的核心是解决代码复用和维护问题，随着代码规模增长，这一问题变得尤为突出。
前端模块化经历了几个重要阶段：

模块化方案	诞生原因	核心特点
IIFE（立即执行函数）	解决早期JavaScript全局变量污染和命名冲突问题	通过函数作用域隔离变量，手动暴露API，适用于简单项目和早期JS开发，无需额外工具支持
CommonJS	为服务端JavaScript提供模块化标准，解决Node.js环境下代码组织问题	使用`module.exports`/`require`进行同步加载，明确的依赖关系，适合服务端环境，天然支持缓存
AMD（RequireJS）	解决浏览器环境中同步加载模块导致的性能问题	支持异步加载和依赖前置声明，适合网络环境下的资源加载，特别适用于早期浏览器端复杂应用
CMD（SeaJS）	解决AMD依赖前置的开发体验问题	采用就近依赖、延迟执行策略，按需加载模块，提供更自然的代码编写方式，主要在国内前端工程化中使用
UMD	解决不同环境间模块兼容性问题	通用模块定义，兼容AMD、CommonJS和全局变量模式，适用于需要在多种环境中运行的库和框架
ES Modules	解决JavaScript缺乏官方标准模块系统的问题	语言层面的原生模块系统，静态导入导出，支持Tree-shaking优化，异步动态导入，是现代前端开发的标准选择

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IIFE 模块示例</title>
</head>
<body>
    <h1>IIFE 模块示例</h1>
    <div id="result"></div>

    <!-- 引入 IIFE 模块 -->
    <script src="./math.js"></script>
    
    <!-- 使用示例 -->
    <script>
        const result = document.getElementById('result');
        
        // 使用加法
        result.innerHTML += `<p>5 + 3 = ${MathUtils.add(5, 3)}</p>`;
        
        // 使用乘法
        result.innerHTML += `<p>4 × 6 = ${MathUtils.multiply(4, 6)}</p>`;
        
        // 使用 PI
        result.innerHTML += `<p>PI = ${MathUtils.PI}</p>`;
    </script>
</body>
</html>

Open Sandbox

// CommonJS 模块使用
const MathUtils = require('./math')

// 打开调试工具查看输出
// 使用加法
console.log('5 + 3 =', MathUtils.add(5, 3))

// 使用乘法
console.log('4 × 6 =', MathUtils.multiply(4, 6))

// 使用 PI
console.log('PI =', MathUtils.PI)

Terminal

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AMD 模块示例</title>
</head>
<body>
    <h1>AMD 模块示例</h1>
    <div id="result"></div>

    <!-- 引入 RequireJS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    
    <!-- 使用示例 -->
    <script>
        require(['./math'], function(MathUtils) {
            const result = document.getElementById('result');
            
            // 使用加法
            result.innerHTML += `<p>5 + 3 = ${MathUtils.add(5, 3)}</p>`;
            
            // 使用乘法
            result.innerHTML += `<p>4 × 6 = ${MathUtils.multiply(4, 6)}</p>`;
            
            // 使用 PI
            result.innerHTML += `<p>PI = ${MathUtils.PI}</p>`;
        });
    </script>
</body>
</html>

Open Sandbox

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CMD 模块示例</title>
</head>
<body>
    <h1>CMD 模块示例</h1>
    <div id="result"></div>

    <!-- 引入 SeaJS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/seajs/3.0.3/sea.js"></script>
    
    <!-- 使用示例 -->
    <script>
        seajs.use(['./math'], function(MathUtils) {
            const result = document.getElementById('result');
            
            // 使用加法
            result.innerHTML += `<p>5 + 3 = ${MathUtils.add(5, 3)}</p>`;
            
            // 使用乘法
            result.innerHTML += `<p>4 × 6 = ${MathUtils.multiply(4, 6)}</p>`;
            
            // 使用 PI
            result.innerHTML += `<p>PI = ${MathUtils.PI}</p>`;
        });
    </script>
</body>
</html>

Open Sandbox

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UMD 模块示例</title>
</head>
<body>
    <h1>UMD 模块示例</h1>
    <div id="result"></div>

    <!-- 引入 UMD 模块 -->
    <script src="./math.js"></script>
    
    <!-- 使用示例 -->
    <script>
        const result = document.getElementById('result');
        
        // 使用加法
        result.innerHTML += `<p>5 + 3 = ${MathUtils.add(5, 3)}</p>`;
        
        // 使用乘法
        result.innerHTML += `<p>4 × 6 = ${MathUtils.multiply(4, 6)}</p>`;
        
        // 使用 PI
        result.innerHTML += `<p>PI = ${MathUtils.PI}</p>`;
    </script>
</body>
</html>

Open Sandbox

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESM 模块示例</title>
</head>
<body>
    <h1>ESM 模块示例</h1>
    <div id="result"></div>

    <!-- 使用示例 -->
    <script type="module">
        import * as MathUtils from './math.js';
        
        const result = document.getElementById('result');
        
        // 使用加法
        result.innerHTML += `<p>5 + 3 = ${MathUtils.add(5, 3)}</p>`;
        
        // 使用乘法
        result.innerHTML += `<p>4 × 6 = ${MathUtils.multiply(4, 6)}</p>`;
        
        // 使用 PI
        result.innerHTML += `<p>PI = ${MathUtils.PI}</p>`;
    </script>
</body>
</html>

Open Sandbox

延伸阅读

moudele 了解 JS 语言模块化发展的历史

什么是同构

答案

同构的定义：同构是指一套JavaScript代码可以同时在服务器端和客户端运行的技术模式。不仅应用可以同构，库和框架也能实现浏览器与服务器端的代码复用，遵循"一次编写，两端运行"原则。
同构的使用场景：
- UI组件库需要服务端渲染支持
- 数据处理库在前后端共用相同逻辑
- 需要跨环境一致性验证的工具库
同构的原理：同构实现通常依赖 webpack 等构建工具实现环境适配。核心原理包括：环境检测（通过判断typeof window等方式）、条件导入（利用webpack配置target属性区分环境）、依赖注入（为不同环境提供接口一致的功能模块）和垫片处理（为缺失API提供兼容实现）。webpack可通过别名配置、环境变量和动态导入等特性，让同一代码库根据运行环境选择合适的模块实现，从而在保持API一致性的同时适应不同执行环境的特点。也可以通过 package.json 配置 browser 和 main 让构建工具自动选择合适的构建策略

如何理解前端工程化？​

什么是前端模块化​

什么是同构​

如何理解前端工程化？

什么是前端模块化

什么是同构