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

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

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

关于工程模版

官方默认提供一个简单增删改查的工程模版（包括H5页面风格和Admin后台管理系统风格），里面写了大量注释，建议边看示例，边看文档，快速上手…

关于Taro项目

模版中的Taro项目基于Taro特定版本制作，开箱即用，但可能版本滞后。如果想使用官方最新版本，也可以自己在Taro项目中安装Elux

在Taro工程中安装Elux

1. 使用taro的cli命令生成新项目（使用Typescript）

2. 增加elux相关依赖，修改./package.json：

   {
     "dependencies": {
         //...
         "@elux/react-taro": "^2.2.1",
     },
     "devDependencies": {
         //...
         "@elux/cli-utils": "^2.0.0"
     },
   }
   

3. 修改./babel.config.js 为：

   module.exports = {
        presets: [
            [
            'taro',
            {
                framework: 'react',
                ts: true,
                loose: false,
                decoratorsBeforeExport: true,
                decoratorsLegacy: false,
            },
            ],
        ],
    };
   

4. 更多参见：在Taro项目中手动安装Elux

例子

一行命令即可查看Taro+Elux实例：

npm create elux@latest 或 yarn create elux

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

@elux/cli-init@2.1.1
新建项目: /Users/hiisea/work/elux/aaa
totally [44P] templates are pulled from ...

? 请选择平台架构 
  CSR: 基于浏览器渲染的应用 [16P] 
  SSR: 基于服务器渲染 + 浏览器渲染的同构应用 [8P] 
  Micro: 基于Webpack5的微前端 + 微模块方案 [8P] 
❯ Taro: 基于Taro的跨平台应用（各类小程序） [8P] 
  RN: 基于ReactNative的原生APP（开发中...） [4P]