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 应用的基础开发模板, 各框架模板如下:

• vue(or vue-cli)

用法

该插件将根据你配置的模块入口生成对应的 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 模拟器中调试.