跳到主要内容

介绍

模块(app)概念类似于应用程序,它可以安装、发布、删除,当你拥有一个模块时,就拥有这个模块提供的能力,例如:

  • duxapp 此模块是所有模块的基础,模块提供了常用的工具、组件
  • duxui 模块提供了全面的ui组件
  • duxappReactNative 此模块提供了RN端的支持
  • duxcmsShop 此模块提供了一个完整的单用户商城,里面包含了商品、订单、售后、用户等完整流程

为什么设计了模块化

在很多后台应用程序中都有在后台安装一个应用,就能实现对应的功能,例如微擎,duxcms, fastadmin等,但是在前端,确很少看到过类似的实现

于是我就结合Taro设计了这样的开发模式,但这对比后端的模块化有些许不同,duxapp的模块他并不会多个模块同时工作,你通常需要指定一个模块作为入口,例如

  • yarn dev:weapp --app=duxcmsShop
  • yarn dev:weapp --app=duxuiExample

这里通过--app指定了入口模块,那么他们将分别会使用到下面这些模块

  • 入口duxcmsShop使用到的模块:
    duxcmsContent amap duxcmsChat unionpay alipay duxcmsPay wechat duxappReactNative duxui duxcms duxapp user duxcmsUser duxcmsAccount duxcmsOrder duxcmsMall duxcmsShop

  • 入口duxuiExample使用到的模块:
    wechat echarts amap duxappReactNative duxcms duxapp duxui duxuiExample

可以看到他们都使用了多个模块,也就是说,当你选择对应模块作为入口的时候,他用到的模块将会被一起编译,未使用的模块则完全不工作,即使那个模块存在你的项目中

通过上面的入口使用到的模块我们可以看出,两个不同的入口都使用了 wechat echarts amap duxappReactNative duxcms duxapp duxui 这些模块,由此我们可以得出一个显而易见的好处:代码共用!

这里的代码共用包含了模块提供的组件、方法、页面等,在很多时候当你要创建一个新项目时,总是要不停的复制粘贴之前写过的代码,通过模块化的设计,就可以不用这样做,且当你发现一个共用模块中存在bug需要修复,也可以直接修复到所有项目,而不需要每一个项目都去在修改一遍

信息

src目录下的每一个文件夹都会被视为一个模块

工作原理

模块的关系类似于npm包的依赖关系,但是模块的依赖不能指定版本号,因为无法在一个项目中使用多个版本的模块

例如 duxuiExample 模块的配置文件 dependencies 字段所指定的,将需要用的模块以数组的形式配置

{
"name": "duxuiExample",
"description": "ui库示例",
"version": "1.0.10",
"dependencies": [
"duxui",
"duxcms",
"amap",
"echarts",
"wechat"
]
}

如上面这个配置,我们在其中并未找到 duxapp 模块,但是打包的模块中确有这个模块,是因为依赖关系每个模块都存在,虽然 duxuiExample 中没有 duxapp 这个依赖,但是在 duxui 中包含了这个依赖,所以也会被要编译进去

duxui的配置文件:

{
"name": "duxui",
"description": "DUXUI库",
"version": "1.0.39",
"dependencies": [
"duxapp"
]
}
信息

模块配置中虽然有 version 字段,但是这个字段仅仅用于发布的时候更新版本,并不会作为依赖关系处理