在 Malagu 的世界里,一切皆组件。组件的一个很重要的部分就是组件属性,如何管理规划组件属性就变得尤为重要了。其中,有一些核心的、基础的组件属性,一般会将它们放到属性的第一层级。
mode
类型为 string[] | string,框架运行模式,框架根据指定模式加载对应的模式配置件,该属性不区分前后端。
在本地通过 malagu serve
运行项目,默认强制附加上 local
模式;在项目构建部署的时候,默认强制附加上 remote
模式。除了在组件的配置文件中指定 mode 外,还可以使用 Malagu 命令行选项 -m,--mode
指定 mode。例如 malagu serve -m cdn,database
父组件配置的 mode 会被子组件继承,兄弟组件配置的 mode 互不影响。
环境隔离,从 mode 的运行机制,我们容易联想到使用它来进行环境隔离,不同环境的属性配置可以放到不同的模式下。其中, local
和 remote
是框架内置的两个模式,用以区分本地和线上两个环境。大部分情况下,一个环境对于这一个模式,当然,也可以一个环境对应着多个模式。
功能开关,把 mode 当开关来用,比如框架在集成 React 前端框架的时候,集成组件 @malagu/react
中提供了一个 malagu-cdn.yml 的模式配置文件,默认该模式文件不会被加载,当我们指定 mode 为 cdn 时,则开起了从 cdn 中加载 React 框架代码的能力。
modules
类型为 string[],组件模块入口文件,分为前端、后端和公共模块入口文件,是区分前后端属性。一个组件对应着多个组件模块,框架底层使用了 IoC 容器,每个组件模块本质是 IoC 容器的模块,最终 IoC 容器加载这些模块,组装成最终的 IoC 容器。框架提供了类对象自动注入到模块的能力,只要在模块对应的入口文件中能后直接或者间接引用到需要注入到模块的类定义文件即可。
大部分情况下,我们不需要配置 modules 属性,因为框架提供了默认加载机制,只要您的模块入口文件在约定的位置就会自动被加载,更多详情在这一章。如果您的模块入口文件需要放置到特殊的位置,此时需要配置 modules 属性。
staticModules
与 modules
作用几乎一样,是组件模块入口文件,相对而言, modules
定义的是动态模块,当多个动态模块依赖一个某个公共的动态模块,Webpack 会将该公共的动态模块在被依赖的每一个动态模块中都会打包一份,这样可能导致整体打包太大。此时我们可以把公共的模块配置为静态模块,这样,其他动态模块就会共享一份打包代码了。
targets
类型为 string[],默认值是 ['frontend', 'backend']
,应用构建目标产物,不区分前后端属性。Malagu 是一个应用开发框架,您可以用它开发前端、后端以及前后端一体应用。targets 告诉框架当前应用什么类型的应用,需要构建什么样的目标产物。除了在组件的配置文件中指定 target 外,还可以使用 Malagu 命令行选项 -t,--targets
指定 targets,例如 malagu seve -t frontend,backend
。
entry
类型为 string,应用入口文件,分为前端、后端和通用应用入口文件,该属性区分前后端。Malagu 框架提供了一个命令行工具,命令行工具是基于 Webpack 实现,命令行工具会使用内置的 Webpack 对应用入口文件进行构建、编译和打包。
不同的 Serverless 平台,代码的入口文件往往存在些许差异,Malagu 通过应用入口文件,适配不同平台的入口文件,从而实现兼容不同的 Serverless 平台,做到云厂商不锁定。
devEntry
类型为 string,本地运行的应用入口文件,分为前端、后端和通用本地运行应用入口文件,该属性区分前后端。本地运行需要的应用入口文件与线上运行应用入口文件存在差异,可以通过 devEntry 指定本地运行的应用入口文件。在本地运行项目,当 devEntry 没有被指定时,会使用 entry 配置。
assets
类型为 string[],资源文件目录,分为前端、后端和公共资源文件目录,该属性区分前后端。业务中可能存在一些静态文件只需要简单拷贝到构建目录即可,这种场景就可以使用 assets 来指定您的资源文件目录位置,框架自动帮您拷贝。
大部分情况下,我们不需要配置 assets 属性,因为框架提供了默认拷贝机制,只要您的资源文件在约定的位置就会自动拷贝到输出目录,如果您的资源文件需要放置到特殊的位置,此时需要配置 assets 属性。
前端资源默认拷贝规则:
- <组件根>/assets
- <组件根>/src/assets
- <组件根>/src/browser/assets
后端资源默认拷贝规则:
- <组件根>/assets
- <组件根>/src/assets
- <组件根>/src/node/assets
示例:
# malagu.yml
assets:
- src/foo/bar
malagu
Malagu 框架由开发工具+一些列组件组成,每个组件都会有自己的组件属性,Malagu 官方提供的组件属性都是以 malagu 作为属性前缀,如果您打算使用 Malagu 作为基础框架,研发您自己的业务框架,那么,您的业务框架组件属性应以业务框架名称作为前缀,从而与 Malagu 官方组件属性区分开来。
webpackHooks
类型为 string[],Webpack 插件,该属性不区分前后端。在 Webpack 进行编译构建之前,执行该插件,在插件中可以通过插件上下文获取应用配置信息、Webpack 配置信息等等。通过该插件,您可以扩展 Webpack 配置对象。
大部分情况下,我们不需要配置 webpackHooks 属性,因为框架提供了默认加载机制,只要您的插件文件在约定的位置就会自动加载执行。如果您的插件文件需要放置到特殊的位置,此时需要配置 webpackHooks 属性。
默认加载规则:
- <组件根>/lib/webpack-hook.js
- <组件根>/lib/hooks/webpack.js
根组件默认加载规则:
- <组件根>/src/webpack-hook.ts
- <组件根>/src/hooks/webpack.ts
configHooks
类型为 string[], 应用配置属性扩展插件,该属性不区分前后端。在框架加载并合并组件属性完成之后,计算属性编译时 EL 表达式之前,执行该插件,在插件中可以通过插件上下文获取应用配置信息、Webpack 配置信息等等。通过该插件,您可以在编译期为应用动态添加配置属性。
大部分情况下,我们不需要配置 configHooks 属性,因为框架提供了默认加载机制,只要您的插件文件在约定的位置就会自动加载执行。如果您的插件文件需要放置到特殊的位置,此时需要配置 configHooks 属性。
默认加载规则:
- <组件根>/lib/config-hook.js
- <组件根>/lib/hooks/config.js
根组件默认加载规则:
- <组件根>/src/config-hook.ts
- <组件根>/src/hooks/config.ts
initHooks
类型为 string[], malagu init
命令插件,该属性不区分前后端。在 malagu init
命令执行完成后,执行该插件,在插件中可以通过插件上下文获取应用配置信息等等。
大部分情况下,我们不需要配置 initHooks 属性,因为框架提供了默认加载机制,只要您的插件文件在约定的位置就会自动加载执行。如果您的插件文件需要放置到特殊的位置,此时需要配置 initHooks 属性。
默认加载规则:
- <组件根>/lib/init-hook.js
- <组件根>/lib/hooks/init.js
根组件默认加载规则:
- <组件根>/src/init-hook.ts
- <组件根>/src/hooks/init.ts
serveHooks
类型为 string[], malagu serve
命令插件,该属性不区分前后端。在 malagu serve
命令执行中 Webpack 构建完成后,执行该插件,在插件中可以通过插件上下文获取应用配置信息、Webpack 编译对象、HTTP 服务对象等等。
大部分情况下,我们不需要配置 serveHooks 属性,因为框架提供了默认加载机制,只要您的插件文件在约定的位置就会自动加载执行。如果您的插件文件需要放置到特殊的位置,此时需要配置 serveHooks 属性。
默认加载规则:
- <组件根>/lib/serve-hook.js
- <组件根>/lib/hooks/serve.js
根组件默认加载规则:
- <组件根>/src/serve-hook.ts
- <组件根>/src/hooks/serve.ts
buildHooks
类型为 string[], malagu build
命令插件,该属性不区分前后端。在 malagu build
命令执行中 Webpack 构建完成后,执行该插件,在插件中可以通过插件上下文获取应用配置信息、Webpack 配置信息等等。
大部分情况下,我们不需要配置 buildHooks 属性,因为框架提供了默认加载机制,只要您的插件文件在约定的位置就会自动加载执行。如果您的插件文件需要放置到特殊的位置,此时需要配置 buildHooks 属性。
默认加载规则:
- <组件根>/lib/build-hook.js
- <组件根>/lib/hooks/build.js
根组件默认加载规则:
- <组件根>/src/build-hook.ts
- <组件根>/src/hooks/build.ts
deployHooks
类型为 string[], malagu deploy
命令插件,该属性不区分前后端。在 malagu deploy
命令执行中,可能会自动执行 malagu build
命令,如果执行 malagu build
命令,则在 malagu build
命令执行完后,执行该插件,否则,直接执行该插件,在插件中可以通过插件上下文获取应用配置信息、Webpack 配置信息等等。
大部分情况下,我们不需要配置 deployHooks 属性,因为框架提供了默认加载机制,只要您的插件文件在约定的位置就会自动加载执行。如果您的插件文件需要放置到特殊的位置,此时需要配置 deployHooks 属性。
默认加载规则:
- <组件根>/lib/deploy-hook.js
- <组件根>/lib/hooks/deploy.js
根组件默认加载规则:
- <组件根>/src/deploy-hook.ts
- <组件根>/src/hooks/deploy.ts