2025年前端工程化工具（前端工程化概念）

科技前沿 • 2025-05-01 17:30 • 阅读 56

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

首先我们先要理解工程化是什么？

工程化即系统化、模块化、规范化的一个过程。如果说计算机科学要解决的是系统的某个具体问题，或者更通俗点说是面向编码的，那么工程化要解决的是如何提高整个系统生产效率。如何提高编码、测试、维护阶段的生产效率。

一个完整的前端工程化流程包括以下流程：

讯享网

可以看出生成文档工具是开发阶段偏向于规范，而在部署阶段产出效用的一环。今天我们讨论的主题是关于生成文档站点的选择。关于工程化的其他模块暂时不展开。

Jsdoc是通过注解方式给为工具库、类库等生成文档。

使用方法分为以下步骤：

1.安装

讯享网

2.配置

讯享网

3.配置标题使用@tutorial

您也可以为提供了一个单独的文件，使用教程标识符作为文件名。此方法已过时，不应该被用于新的项目。

4.使用

讯享网

生成文档

至此jcdoc即可生成文档。下面是样例图展示：

Docsify是一个用Markdown文件建立链接的生成文档工具，偏向于Vue官方文档的风格. 使用时需要有一点Markdown的语法基础。这里就不展开细说。

1.初始化

讯享网

初始化成功后，可以看到目录下创建的几个文件

入口文件
会做为主页内容渲染
用于阻止 GitHub Pages 忽略掉下划线开头的文件

2.配置项

3.拓展MarkDown语法

可与html一起共用

4.本地预览

讯享网

样例图：

封面图

文档首页图与

文件中的链接指向即可完成以下展示

基于mdx语法的、偏向于react风格为组件库生成文档的工具。

1.下载

2.自动读取配置文件

讯享网

v2以上使用ts时需要配置

使用 Gatsby 配置 webpack，需要新建一个gatsby-node.js，项目默认读取

3.使用说明

Button组件

讯享网

Button.mdx说明文档文件

路由：会根据项目的文件结构生成路由

效果图

运行及打包命令

讯享网

尤大在2018年发布的关于生成vue文档的轮子。主要还是需要配置三个配置：主页、导航栏、侧边菜单栏、搜索框等等。 1.下载

配置

README.md默认为首页、config.js为项目启动时读取的配置文件

讯享网

3.使用及构建

效果图

Dumi是使用mdx编写的React框架文档工具

特性

📦 开箱即用，将注意力集中在组件开发和文档编写上
📋 丰富的 Markdown 扩展，不止于渲染组件 demo
🏷 基于 TypeScript 类型定义，自动生成组件 API
🎨 主题轻松自定义，还可创建自己的 Markdown 组件
📱 支持移动端组件库研发，内置移动端高清渲染方案
📡 一行命令将组件资产数据化，与下游生产力工具串联

1.初始化及部署

讯享网

1.使用方法：

为组件库各个Demo提供可交互式的样例模板

默认路由为根据页面结构自动生成，不需要手动配置

在mdx中如何引用外部demo

2.配置

菜单配置

讯享网

导航栏配置

3.编写组件时，Api自动生成

4.使用时的效果图

可交互的组件+Api接口说明

React Styleguidist

Storybook

Gitbook

Hexo

Vitepress

以上就是我对文档生成工具的使用集合。可以看出工具也是从需要过多的手动配置慢慢进化成开箱即用的、功能更多的、不需过多配置的文档工具。

参考资料

Jsdoc中文文档

Docsify官方文档

VuePress官方文档

Gatsby官方文档

Dumi官方文档