CMOS 应用配置说明
CMOS Application Transform Webpack Plugin
安装
npm i http://192.168.233.181:8081/repository/npm-hosted/@nbicc-private/cmos-application-config/-/cmos-application-config-2.0.0-2.tgz
yarn add http://192.168.233.181:8081/repository/npm-hosted/@nbicc-private/cmos-application-config/-/cmos-application-config-2.0.0-2.tgz
仅支持 Webpack 5
这个插件简化了 CMOS 应用的构建, 提供了挂载文件模板, 全局资产文件支持功能。
开箱即用
已提供 CMOS 应用的基础开发模板, 各框架模板如下:
用法
该插件将根据你配置的模块入口生成对应的 CMOS 应用模块文件, 只需要将插件添加添加到你的 webpack 配置中, 并准备好 CMOS 应用的 appKey, 需要作为模块导出的模块入口文件以及挂载文件的模板。
下文以vue(vue-cli)为例, 说明插件的使用方法
vue.config.js
vue(vue-cli)项目中, publicPath
需配置为 auto
, css.extract
需配置为 true
const { CMOSApplicationTransformWebpackPlugin } = require('@nbicc-private/cmos-application-config')
module.exports = {
// publicPath 必须为 'auto', 否则在不同域下无法加载
publicPath: 'auto',
css: {
// 样式隔离依赖 mini-css-extract-plugin, vue-cli 默认开发模式下不开启, 设置为 true 强制开启
// https://cli.vuejs.org/config/#css-extract
extract: true
},
configureWebpack: {
plugins: [
new CMOSApplicationTransformWebpackPlugin({
appKey: '__APP_KEY__',
modules: {
// '__MODULE_NAME__': '__MODULE_EXPORT_FILE_PATH__',
hello: 'path/to/hello/index.vue',
world: 'path/to/world/index.vue',
},
template: 'path/to/mountToMainApplicationTemplate.js',
}),
],
}
}
假设已存在挂载模板文件路径为 path/to/mountToMainApplicationTemplate.js
, 内容如下所示:
path/to/mountToMainApplicationTemplate.js
import { createApp } from 'vue'
import App from '<%= MODULE_PATH %>'
import { systemApplicationMount } from '@nbicc-private/application-client' // 挂载函数, 并不会对入参做任何处理, 仅出于为 js 提供 TypeScript 的类型定义支持的目的
import './src/assets/asset.css'
const mount = systemApplicationMount((el, client) => {
const app = createApp(App)
app.provide('cmosClient', client)
app.mount(el)
})
export { mount }
- <%= MODULE_PATH %>: MODULE_PATH 是模板变量, 内容将会被替换为配置的模块入口文件路径. 本示例中将会被替换为
path/to/hello/index.vue
和path/to/world/index.vue
插件也可以支持不同的模块入口文件设置不同的挂载模板, 只需要将模块入口文件路径替换成 { import: '模块入口文件路径', template: '模块特定的挂载模板文件路径' }
这样的对象即可。
vue.config.js
const { CMOSApplicationTransformWebpackPlugin } = require('@nbicc-private/cmos-application-config')
module.exports = {
// ...
configureWebpack: {
plugins: [
new CMOSApplicationTransformWebpackPlugin({
appKey: '__APP_KEY__',
modules: {
hello: {
import: 'path/to/hello/index.vue', // 模块入口文件路径
template: 'path/to/hello/mountToMainApplicationTemplate.js' // 模块特定的挂载模板文件路径
},
world: 'path/to/world/index.vue',
},
template: 'path/to/mountToMainApplicationTemplate.js',
}),
],
}
}
选项
Name | Type | Default | require | Description |
---|---|---|---|---|
appKey | {String} |
- |
是 | CMOS 应用的 appKey |
modules | {Object} |
{} |
是 | CMOS 应用需要导出的模块入口 |
template | {string} |
- |
是 | CMOS 应用默认的挂载模板文件 |
assets | {[string]} |
[] |
否 | CMOS 应用需要挂载到全局的资产文件, 如: 字体文件 |
挂载模板文件支持的模板变量
挂载模板文件编译依赖 lodash.template 方法.
目前支持的模板变量如下表所示:
Name | Description |
---|---|
MODULE_PATH | 模块入口文件路径 |
ROOT_PATH | 项目根路径 |
APPLICATION_KEY | CMOS 应用的 appKey |
挂载模板文件说明
挂载模板文件是一个命名导出了 mount(el, cmosClient)
函数的js文件. 一般会在 mount
函数中进行模块初始化, 注入依赖等操作.
当主应用需要加载 CMOS 应用的某个模块时, 会调用该模块对应的 mount(el, cmosClient)
函数.
该模块的挂载点(一个 DOM 元素)将作为第一个参数传入, 第二个参数包含了主应用提供给子应用的功能, 如本地储存, 对象存储, 登录登出等功能.
mount
函数
如何编写一个 一个典型的 mount
函数如上文的 path/to/mountToMainApplicationTemplate.js 所示.
其内容就是一个 Vue 应用的标准挂载流程. 区别仅为导入的 App
是动态的和流程代码包裹在一个 mount
函数中导出供主应用调用.
其他
控制台信息打印
插件提供一个的监听函数 CMOSApplicationTransformWebpackPlugin.devServerListener
用于 webpack-dev-server
的 onListening
属性,
设置监听函数后, 在项目使用 webpack-dev-server
启动时, 控制台将打印当前应用的 appKey
, 导出的模块名列表以及远程访问入口.
远程访问地址可用于在 CMOS 模拟器中调试.