前端工程化知识点-概述

X_Y
13 阅读8分钟

​

目录

#模块化标准

#包管理工具

#工具链

# 构建器

#框架类

#语言类

#模块化标准

CommonJS、 ES Module、 AMD、 CMD、 UMD 

1.CommonJS 是 Node.js 的标准，主要用于服务器端 JavaScript。在 CommonJS 中，每个文件都被视为一个模块，并且通过 module.exports 和 require() 来导出和导入模块。

特点：同步加载，加载一次后缓存、使用与服务端、每个文件为一个模块

​编辑

2.ES Module是ES6 引入的官方模块标准，现代 JavaScript 开发的首选。通用

特点：静态分析，编译时加载、支持树摇（Tree-shaking）、官方标准，浏览器原生支持

​编辑

3.UMD ，通用，兼容 CommonJS、AMD 和全局变量模式。代码复杂，适合开发库

​编辑

4.AMD，适用于浏览器

特点：异步加载、依赖前置，提前声明依赖、专为浏览器环境设计

​编辑

5.CMD，适用于浏览器，是 Sea.js 推广的规范，结合了 CommonJS 和 AMD 的特点。

特点：异步加载、依赖就近、用时声明、单一职责

​编辑

#包管理工具

npm、 yarn、 pnpm 

​编辑

幻影依赖：未在package.json中声明的依赖，如果在项目中直接使用可能导致版本失控问题

pnpm使用中央仓库（.pnpm-store）管理，pnpm的模块解析器会严格检查node_modules层级，未声明的包无法通过根目录访问。只有在package.json中声明的依赖，才会出现在根node_modules。子依赖的依赖必须通过父包的node_modules层级访问

#工具链

CSS Pre Processor、 Post CSS、 Atomic CSS、 CSS in JS、 Babel、SWC、 ESLint、Prettier 

1.CSS Pre Processor：CSS 预处理器是一种能让你使用特殊语法编写 CSS 的工具，它提供了变量、嵌套规则、混合、函数等功能，让 CSS 代码更易维护和扩展。

Sass:sass基于Ruby语言开发而成，关键字$

// 变量
$primary-color: #007bff;
$font-size-base: 16px;
// 嵌套规则
.nav {
    a {
        color: $primary-color;
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
}
// 混合（Mixins）
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.button {
    @include border-radius(5px);
    background-color: $primary-color;
    color: white;
    padding: 10px 20px;
}

// 函数
@function double($number) {
    @return $number * 2;
}

.box {
    width: double(100px);
    height: double(50px);
    background-color: lighten($primary-color, 20%);
}

Less:关键字@

// 变量
@primary-color: #007bff;
@font-size-base: 16px;

// 嵌套规则
.nav {
    a {
        color: @primary-color;
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
}

// 混合
.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.button {
    .border-radius(5px);
    background-color: @primary-color;
    color: white;
    padding: 10px 20px;
}

// 函数
.double(@number) {
    @result: @number * 2;
}

.box {
    .double(100px);
    width: @result;
    .double(50px);
    height: @result;
    background-color: lighten(@primary-color, 20%);
}

2.Babel：代码转换工具（@babel/parse、@babel/transform、@babel/generater）

Babel 的工作原理 ：

“把代码(es新语法)变树 → 改树(AST 语法树) → 再变回代码(浏览器可识别的代码)”。

3.SWC：SWC 是一个用 Rust 编写的、速度极快的 JavaScript/TypeScript 编译器和平台。它的主要目标是提供比 Babel 等传统 JavaScript 工具链更优越的性能，同时保持与现有生态系统的兼容性。

Transpilation（编译）--- Minification (压缩) --- 打包（实验性）

4.ESLint+Prettier ：代码监测+代码风格

以Vue项目为例，在使用Vue-Cli构建项目时，选择 eslint + prettier。项目根目录存在 .eslintrc.js 文件，为eslint配置文件。

# 构建器

Webpack、 Vite、Rspack

1.Webpack

综述：

在目前的项目中，我们会有很多依赖包，webpack负责将浏览器不能识别的文件类型、语法等转化为可识别的前端三剑客（html，css，js），并在这个过程中充当组织者与优化者的角色。

bundle： 捆绑包，是指将所有相关的模块和资源打包在一起形成的单个文件。它是应用程序的最终输出，可以在浏览器中加载和执行。可以有一个或多个，bundle 是Webpack打包过程的最终输出文件。(大)

chunk： 代码块，是Webpack在打包过程中生成的中间文件，用于组织和按需加载模块。一个包可以有多个代码块，一个代码块可以属于多个包（中）

Module： 模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。（小）

Entry： webpack 构建其依赖图的开端，它会找出有所有依赖的模块和库（直接和间接），处理，最后输出到bundle文件中。

Output： 告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。

Loader： 将所有类型的文件转换为 webpack 能够处理的有效模块，最终的bundle可以直接引用

Plugin： 从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

核心流程：

（1）读取配置文件

（2）初始化 Compiler编译对象，调用Compiler.run()启动Webpack的编译构建流程

   (3)从入口entry开始递归查找和收集依赖的模块，使用loader处理成AST抽象语法树以供webpack对代码进行后续分析，再把模块根据一定的联系组装成多个chunk，再把chunk转换为单独的文件

（4）从output查看输出的目录以及输出配置，把chunk文件合并到bundle.js，输出到对应目录，打包完成

优缺点：

先打包生成bundle(经过Webpack打包后的静态资源文件)，再启动开发服务器，启动慢

HMR时需要把改动模块及相关依赖全部编译

2.Vite

综述：（ Node.js 是 Vite 实现高效开发和构建的基础)

Vite由两个主要部分组成：

一个开发服务器，它基于 原生 ES 模块(ESM)，提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR)

一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源(打包后的体积更小)。

esBuild： 基于go语言开发，在开发环境进行编译的工具

ESM： ESM是浏览器支持的一种模块化方案，允许在浏览器实现模块化。ES6之前，JS一直没有自己的模块体系。但是ES6引入了ESM，到此，JS终于有了自己的模块体系。

HMR： 全称 Hot Module Replacement，模块热更新，它能够在保持页面状态的情况下动态替换资源模块，提供丝滑顺畅的 Web 页面开发体验。

Rollup： 基于ES6的模块打包工具，打包文件小且干净，执行效率更高，更专注于JS打包，同时支持 Tree-shaking。

核心流程：

（1）vite通过npm run dev启动开发服务器，

vite会先对node_modules下的三方库进行以来扫描和收集（依赖优化或者预构建，这一步还会有缓存操作node_modules/.vite，只有当配置文件或锁lock文件改变时才会重新预构建）。

vite监听端口（5173）托管静态资源。捕获浏览器的get资源请求，请求到html执行js脚本，进行编译工作

（2） esbuild编译成esm形式的js代码(保持原生模块import），所以开发模式下不打包！ 调用 vite:import-analysis 插件来对 import 的路径进行解析为可访问状态

（3）返回js给浏览器自己解析 import， 发送请求获取依赖的模块

（4）vite响应模块请求---编译/注入虚拟模块

（5）所有模块加载完成，程序启动

优缺点：

先启动开发服务器，利用新一代浏览器的ESM能力，无需打包，直接请求所需模块并实时编译

HMR时只需让浏览器重新请求该模块，同时利用浏览器的缓存（源码模块协商缓存，依赖模块强缓存）来优化请求

3.Rspack

基于 Rust 的高性能 Web 构建工具。rspack 主要适配 webpack 生态，对于绝大多数 webpack 工具库都是支持的。Rspack 的核心理念和 webpack 一样，都是通过模块化依赖分析，把各种类型的资源，无论是 JavaScript、CSS，还是图片等，打包生成最终能在浏览器中运行的 bundle 文件。

核心流程：

（1）配置解析阶段， 加载rspack.config.js进行配置合并

（2）Compiler 的创建与插件机制， 创建 compiler 实例，遍历用户配置的插件数组 plugins，将插件注册到 compiler 实例上；调用 compiler.compile()进入正式构建阶段，从entry开始生成依赖图

（3）桥接阶段：（重点） 桥接阶段的作用是让 Rspack 能够通过 JavaScript 调用 Rust 封装的 JsCompiler 方法来完成真正的核心编译。

（4）构建阶段： 创建编译核心实例Compilation，采用持久化设计，不像webpack每次构建都会创建新实例；创建两条核心处理线路，主任务负责维护模块图状态，后台任务负责执行模块解析和依赖分析

（5）生成阶段： 将模块图封装为最终输出文件的关键环节，包括死代码消除、循环依赖检测、结构优化等直到所有插件都无需再优化；将模块图转换为chunk图进行代码分割；最终为每个模块生成js和css代码到output目录

#框架类

微前端框架、 测试框架

#语言类

TypeScript、 FlowJS

​

avatar
文章
阅读
粉丝