import{o as e,c as a,V as s}from"./chunks/framework.b31a4d00.js";const o=s('
项目仓库借助于 pnpm 工作区 来实现 Monorepo ,在 packages
目录下存放多个互相关联的独立包。
@fesjs/create-fes-app
: 创建项目模板模块。提供create-fes-app
命令,提供创建多种类型项目模板的能力。
@fesjs/compiler
: 编译时插件管理模块。定义插件的生命周期、插件配置、插件通讯机制等。
@fesjs/runtime
: 运行时插件模块。集成了 vue-router,定义运行时插件生命周期、插件通讯机制。
@fesjs/preset-build-in
: 内置插件集。包含dev
、build
等命令,集成 webpack5+babel,提供方便编写插件的 API,入口文件处理,路由处理等能力。
@fesjs/fes-template
: 适用于 PC 类型的模板项目。
@fesjs/fes-template-h5
: 适用于 H5 类型的模板项目。
@fesjs/plugin-${name}
: 官方插件。
@fesjs/fes
: 入口模块。提供fes
命令和 API 入口,封装@fesjs/compiler
+ @fesjs/runtime
+ @fesjs/preset-build-in
,用户只需要安装此依赖和其他插件。
开发要求:
本项目开发使用的一些主要工具:
克隆仓库:
git clone https://github.com/WeBankFinTech/fes.js.git
进入fes.js
目录,安装依赖:
pnpm i
文档代码在docs
目录,基于 vitepress 实现。
pnpm docs:dev
菜单配置在/docs/.vitpress/configs/sidebar/zh.ts
中,可以通过此配置找到对应想修改的文档。
如果想添加图片,则可以先把图片添加至/docs/.vitpress/public
,在代码中使用:
<img :src="withBase('framework.png')" alt="架构" />
当 md 文档保存后,文档会自动更新,在http://localhost:8080/
查看。
Fes.js
统一使用ES Module
规范编写源码,代码会在 node 端和浏览器端执行,所以源码需要编译后才能发布成包,再被执行。
pnpm dev
当我们修改build.config.js
中配置的包代码时,会把src
目录的源码编译后到lib
目录。
在了解Fes.js
设计前提下,修改核心代码或者插件代码。
根据需求选择模板项目来验证修改内容,比如选择fes-template
:
pnpm
关联依赖cd packages/fes-template\npnpm dev
localhost:8000
查看结果每次修改插件或者核心代码后,等待自动编译完,需要在模板目录重新执行fes dev
,比较费时费力。
可以先在模板的 .fes
目录中找到对应临时代码,更改逻辑,验证完后再将变更逻辑保存到正式文件中。
WARNING
直接修改临时文件切莫重新执行fes dev
,修改会被覆盖。