Elux- 将企业级工程化框架带入小程序开发

作者：hiisea

2022 年 6 月 14 日
本文字数：1827 字
阅读完需：约 6 分钟

跨框架、跨平台

基于“微模块”和“模型驱动”的跨平台、跨框架同构方案：https://eluxjs.com

Elux 将企业级工程化框架引入小程序开发，支持 React/Vue，支持 Web（浏览器页面）SSR（服务器渲染）Micro（微前端）Taro（小程序）APP（手机应用）

Elux 特色

Elux 不只是一个 JS 框架，更是一种基于“微模块”和“模型驱动”的跨平台、跨框架同构方案。它将稳定的业务逻辑与多样化的运行平台、UI 框架进行剥离，让核心逻辑得到充分的简化、隔离和复用。

微模块

将业务领域的模块化带入前端，各微模块可独立开发、灵活拆装、按需加载、版本控制，是一种更自由、更细粒度的微前端。

更多参见 Elux 设计思想：从“微前端”到“微模块”

模型驱动

以业务逻辑的数据模型作为核心驱动，减少对运行平台、UI 框架的强依赖和干挠，给您一个清爽的上帝的视角开发和运行应用。

更多参见 Elux 设计思想：借助"模型驱动"实现跨端开发

统一的虚拟路由

Elux 抹平了各平台、各 UI 库中路由的千差万别，实现了统一的带二维历史栈的虚拟路由，并催生出独有的虚拟多页，让单页和多页彼此扬长避短...

更多参见 Elux 设计思想：基于双栈单链的“虚拟路由”+“虚拟多页”

跨平台、跨框架同构

支持：React/Vue，支持：Web（浏览器页面）SSR（服务器渲染）Micro（微前端）Taro（小程序）APP（手机应用）

更多介绍参见：Elux介绍

使用 Elux 的工程结构

我们先看一下时下流行的前端工程目录，假设有独立的功能：ModuleA 和 ModuleB

src├── assets├── consts│      ├── ModuleA│      │      ├── Const1.ts //A中使用的一些常量│      ├── ModuleB│             ├── Const2.ts //B中使用的一些常量├── utils├── components│      ├── ModuleA│      │      ├── Component1.ts //A中使用的一些UI组件│      ├── ModuleB│             ├── Component2.ts //B中使用的一些UI组件├── containers├── pages│      ├── ModuleA│      │      ├── Page1.ts //A中使用的一些页面│      ├── ModuleB│             ├── Page2.ts //B中使用的一些页面├── models│      ├── ModuleA│      │      ├── Store1.ts //A中使用一些状态定义│      ├── ModuleB│             ├── Store2.ts //B中使用一些状态定义│

复制代码

其特点是以“文件职能”作为一级分类、“功能模块”作为次级分类。

现在如果我需要拿掉 ModuleB，或者新增 ModuleC，你将不得不进行多个目录的操作。随着文件越来越多，相互引用越来越复杂，ModuleB 的相关资源和依赖像一堆乱麻散落在各个不同文件和文件夹中，你会发现要干净的剥离 ModuleB 是一个巨大的任务...

那应当如何改进呢？

将“功能模块”作为一级分类，“文件职能”作为次级分类
注意模块的对外封装，不要随意绕过封装来引用模块内部资源

以下是 Elux 工程的常用结构：

src├── modules│      ├──  ModuleA│      │     ├── assets│      │     │     ├── imgs //A中使用的一些图片等│      │     ├── consts│      │     │     ├── Const1.ts //A中使用的一些常量│      │     ├── utils│      │     ├── components│      │     │     ├── Component1.ts //A中使用的一些UI组件│      │     ├── views│      │     │     ├── View1.ts //A中使用的一些业务视图│      │     ├── model.ts //A的数据模型│      │     └── index.ts //A的对外封装与导出│      │ │      ├── ModuleB│      ├── ModuleC

复制代码

可以看到在 Elux 工程中，所有与功能模块相关的文件都被放到了一个独立的文件夹中，并通过 index 文件统一对外导出，这便是 Elux 中微模块得以独立开发、安装和运行的基础。

Elux 安装使用方法

Cli 工具安装

使用 npm 或者 yarn 全局安装 @elux/cli-init

npm install -g @elux/cli-init

复制代码

初始化新工程向导

elux-init

复制代码

如果你不想全局安装，只是想看看案例，也可以一条命令搞定：

npx @elux/cli-init elux-init

复制代码

注意在向导中选择 Taro 工程模版：

@elux/cli-init@2.1.1新建项目: /Users/hiisea/work/elux/aaatotally [44P] templates are pulled from ...
? 请选择平台架构   CSR: 基于浏览器渲染的应用 [16P]   SSR: 基于服务器渲染 + 浏览器渲染的同构应用 [8P]   Micro: 基于Webpack5的微前端 + 微模块方案 [8P] ❯ Taro: 基于Taro的跨平台应用（各类小程序） [8P]   RN: 基于ReactNative的原生APP（开发中...） [4P]

复制代码

发布于: 刚刚阅读数: 8

hiisea

关注

还未添加个人签名 2022.06.13 加入

Elux-基于“微模块”和“模型驱动”的跨平台、跨框架同构方案

发布

暂无评论

创作场景

Elux- 将企业级工程化框架带入小程序开发

Elux 特色

微模块

模型驱动

统一的虚拟路由

跨平台、跨框架同构

使用 Elux 的工程结构

那应当如何改进呢？

Elux 安装使用方法

Cli 工具安装

hiisea

评论