关于vue.js:开源1年后Fesjs-升级为企业级通用前端应用解决方案

5次阅读

共计 3322 个字符，预计需要花费 9 分钟才能阅读完成。

/ 诞生 /

转瞬曾经退出公司 5 年，始终在做银行客服业务相干的中后盾利用的开发工作；日复一日做相似性很高的开发工作，难免会有些干燥与乏味，于是乎，思考如何可能更 Smart 的形式来综合的优化和晋升中后盾利用开发的效率。

从过往的工作中提炼了重要的三点，首先是 Fast，要有极致麻利的开发体验；而后是 Easy，学习成本低容易上手；最初，还要 Strong，代码稳健性更强，性能优；由此构建成了 Fes.js 这款基于 Vue 3 的前端利用解决方案。

以约定、配置化、组件化的设计思维，让用户仅仅关怀用组件搭建页面内容。技术曲线平缓，上手也简略，通过了多个我的项目打磨后趋于稳定，丰盛的 Vue 3 生态和 Fes.js 插件，让业务开发更麻利，顺滑。

/ 成长 /
Fes.js 在 2020 年开源之初，只定位在中后盾利用解决方案，当初新增了开发 H5 的性能，曾经演进为通用前端利用解决方案。接下来，就和大家分享一下 Fes.js 经验了哪些革新，实现了这次迭代降级，心愿能给大家带来借鉴，也期待大家试用降级后的 Fes.js。
v1

中后盾前端利用大多要解决这些事：

构建，dev 和 build

入口 index.html

入口 main.js，初始化 vue 实例

路由相干

权限相干

页面布局

接口申请

…

在过后 CLI 工具很热门，比方 Vue-CLI 和团队内的 mn，他们解决构建相干事件，而其余事件须要我的项目自行处理。那么开发新我的项目步骤就是先拷贝老我的项目，再改改代码，再增加新性能，长此以往发现一些问题：

继承“待优化”代码，不相熟改起来很吃力，不改又是隐患

技术栈老旧，降级很吃力，不如从新弄一套新的

一个 request 工具函数，十种写法，保护起来心累

那么提供一个封装这些通用性能的框架，对立代码标准和代码组织形式，代码优化和降级交给框架，用户齐全不必操心，v1 版本就做这了这些事。

设计思路

模块划分

fes-cli 是命令行工具，提供预编译、创立工程、开启开发调试、打包公布等能力。
fes-core 是运行时框架，提供固定页面布局，提供权限治理、贮存治理、路由治理、接口治理、状态治理、数据字典治理、环境治理等 API。以插件的形式提供运行时的扩大。
fes-ui 是组件库，蕴含 30+ 的 PC 端组件库，能够疾速搭建出增删改查等页面。

应用形式

全局装置命令
wnpm i @webank/fes-cli -g
在我的项目中申明依赖
{
```
"dependencies": {
```
“@webank/fes”: “^1.0.0”
```
}
```
}
装置依赖后在我的项目根目录运行
fes dev

自此 v1 版本诞生，把开发利用比作建房子的话，应用 fes.js 相当于给你毛坯房，只须要装修

v2

当 v1 版本迭代运行一段时间后，咱们遇到一些问题：

模块划分不合理
v1 版本对用户屏蔽了 fes-ui 的概念，用户不须要理解如何装置和注册这些组件，只须要在 package.json 中申明依赖 @webank/fes，在代码中应用组件。现实很完满，然而事实很骨感。fes-ui 是高频更新的，fes-core 是低频更新的。当 fes-ui 不兼容更新降级大版本号时，因为 @webank/fes 依赖 fes-ui，那么 @webank/fes 也必须追随降级大版本，给 @webank/fes 可用性稳定性带来挑战。
全局 fes 命令
v1 版本预期用户在本地全局装置 fes 命令，在构建平台中也全局装置 fes 命令，应酬不同我的项目能够节俭十分多安装时间。如果 fes-cli 十分稳固，简直不更新，那么是可行的。然而事实是 fes-cli 也须要更新迭代，同时 fes-cli 提供的预构建、mock 等能力须要我的项目配合，存在不同我的项目须要应用不同版本 fes-cli 的可能。
筹备在 v2 版本解决下面问题。
设计思路
运行思路跟 v1 版本统一，要进行两项改变：1、拆分 @webank/fes 为 @webank/fes-core 和 @webank/fes-ui，解耦两个模块 2、fes-cli 改为我的项目启动，非全局装置。

模块划分

应用形式

在我的项目中申明依赖
{
```
"dependencies": {
```
“@webank/fes-core”: “^2.0.0”,
“@webank/fes-ui”: “^2.0.0”,
```
},
"devDependencies": {
```
“@webank/fes-cli”: “^2.0.0”,
```
}
```
}
装置依赖后在我的项目根目录运行
fes dev
V2 版本还把 Vue 从 1.0 降级到 2.0，webpack 降级到 4.0，带来了更好的开发体验。

v3

在 V2 版本运行一段时间后，咱们又遇到一些问题：

扩大能力弱
V2 版本封装 Vue 的插件能力提供扩大。Vue 插件在运行时做事件，无奈在构建阶段做事件。比如说我想把 src/icons 文件夹下的 svg 文件主动生成 Vue 组件并注册，Vue 插件就无奈实现。它须要在构建阶段扫描 icons 文件夹，依据文件名生成额定代码。
过于固化
应用 fes.js 好比在格局固定的毛坯房根底上进行装修，增加各种货色。时代在变，用户想要有更好寓居的体验，不满足毛坯房的格局，然而 fes.js 无奈变更格局。
为了解决这些问题，fes.js 一是须要强化扩大能力，让插件反对运行时和构建时。二是不再固定毛坯房的格局，而是把毛坯房的房间形象为插件，让用户自由选择用什么插件来组成毛坯房。V3 以插件机制重写全副代码。

设计思路

在 webpack 等构建器执行编译之前，各插件能够读取文件、配置、环境变量，执行相应逻辑后把运行时代码写入.fes 长期目录，而后在入口文件 fes.js 增加运行时代码依赖。通过此形式插件能够反对构建时和运行时扩大能力。此架构下，外围逻辑是插件的生命周期治理。

插件机制

执行 fes dev 的运行流程：

模块划分

fes 内置包 preset-build-in 和 runtime，蕴含构建、路由、入口文件、运行时插件机制内容，不蕴含任何业务相干的内容，所以从此 fes.js 摇身一变成为通用的前端利用解决方案。
虚线蕴含的插件依据业务需要自在筛选。比方开发中后盾利用，布局能够应用 fes-plugin-layout，权限设置能够应用 fes-plugin-access。

插件

应用形式

在我的项目中申明依赖
{
```
"dependencies": {
```
“@fesjs/fes”: “^2.0.0”
```
}
```
}
装置依赖后在我的项目根目录运行
fes dev

V3 版本还把 Vue 降级到 3.0，webpack 降级到 5.0，进一步优化了开发体验。同时公布了新的基于 Vue3 组件库 FES-Design，FES-Design 的设计体系目前还在一直的摸索中，心愿今后可能通过更多的积攒为用户提供一款更优良更业余的企业级产品设计体系。

V4

在开发 v3 版本时 webpack 刚公布 5.0，思考到 webpack 生态，咱们持续用 webpack 作为构建器，构建相干的逻辑围绕 webpack 进行。在去年，前端圈各种构建器计划冒出来了，比方 esbuilder、vite、tsc 等。体验 vite 之后感觉真香，webpack 齐全打不过，打不过就退出吧！

设计思路

v3 版本中 webpack 相干的构建逻辑在包 @webank/preset-built-in 中，把他们从中剥离进去造成新模块 fes-builder-webpack，同时基于 vite 开发构建逻辑造成新模块 fes-builder-vite。名称以 fes-builder- 结尾的包是负责解决构建逻辑的插件集，会优先加载，实现逻辑的形式仍然基于插件机制。

应用形式