2025年前端工程化（前端工程化和模块化的理解）

大家好，我是讯享网，很高兴认识大家。

我们在开发大型项目的过程中，是否遇到过比如：项目光启动速度要十分钟，手动管理依赖关系、编译、压缩等过程既费时又容易出错，项目打包出来发现光JS代码就足足达到了10兆，上传极其耗费时间,举一个特别简单的例子！！！

讯享网

为什么会出现这种情况？？？

在我们日常的开发和学习的过程中是没有这些问题的，当我们进行团队开发项目的时候，项目达到了一定的规模，就会出现各式各样的问题，像代码格式不统一，性能优化不足等等，这个时候就需要我们前端工程化来解决各种各样的问题,可以说没有工程化你就拿不到高薪！！！

1、模块化：Common JS、ES Module、AMD、CMD、UMD...

2、包管理器(选学)：npm、cnpm、pnpm（略有难度）、yarn，bower

3、构建工具：fis3、parcel、grunt、webpack、rollup.....

4、脚手架：vite、Vue-cli、umijs、create-react-app....

1、什么是模块化？？？

随着前端应用的日益复杂，我们的项目代码已经逐渐膨胀到了不得不花费大量时间去管理的程度了，模块化就是最主流的代码组成方式。

2、模块化的规范。

Common JS规范？？？

Common JS规范是node.js提出的一套模块化的标准，我们在node.js当中所有的模块代码，必须要遵循Common JS规范。

Common JS到底规定了什么？？？

一个文件就是一个模块
每一个模块都有单独的作用域
通过module.exports导出成员
通过require函数载入模块

Common JS的弊端

根据node.js的模块加载机制，Common JS是以同步的模式加载模块的，在浏览器端使用Common JS必然会导致我们的效率低下。

3、如何解决？？？

随着技术的发展，javascript的标准也在逐渐完善，在模块化的实现方式相对以往已经有很大的变化了，目前对于前端模块化的实现方式也已经基本统一了。

我们在node.js环境当中，会遵循Common JS 规范编写模块。
在浏览器环境当中我们采用ES Modules规范。

4、 ES Modules规范

ES Modules是ECMAScript 2015（ES6）当中定义的最新的模块系统，在发布初期大部分主流的浏览器是不支持这样一个模块系统的，但是随着webpack一系列打包工具的流行，

比如说拿一个现在比较流行的vite+react项目，vite就是默认支持的就是 ES Modules规范：

.eslintrc.cjs 文件已经详细地指定了项目遵循的规范和规则

接下来给大家展示一个简单的模块化示例。

首先，我们需要创建几个模块文件：

        Counter.js：这是我们的计数器组件模块。
        Button.js：用于增加和减少计数的按钮组件模块。
        App.js：主应用组件，将 Counter 组件整合进来

1. Button.js

这个模块定义了一个按钮组件，它可以接收一个 onClick 事件处理函数和文本内容。

讯享网

2. Counter.js

这个模块定义了一个计数器组件，它包含了状态和按钮组件的引用。

讯享网

3. App.js

这是主应用组件，它将 Counter 组件整合进来，并且作为整个应用的入口点。

4. Index.js

这是应用程序的入口文件，它渲染 App 组件到页面上。

讯享网

5. 文件结构

确保你的文件结构类似于以下结构：

这就是如何在React 中使用模块化的方式组织代码。每个组件都有明确的责任，并且可以通过组合这些组件来构建更复杂的 UI。这样的组织方式不仅有助于代码的可读性和可维护性，而且还能方便地进行单元测试。