@nbicc/cmos-application-config

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 模拟器中调试.