一、简介

southgis-dynamic-module-loader（动态模块加载器）可以实现前端工程生产环境下，按需打包模块代码。

• 本依赖包需要在vite+vue3搭建的工程下运行。
• 以npm包的形式发布，可使用npm快速安装使用。

二、安装

$ npm install southgis-dynamic-module-loader -S

三、vite插件引入

在vite.config.js文件中引入ImportFilter插件

import { defineConfig } from 'vite'
import ImportFilter from 'southgis-dynamic-module-loader/Build/Vite/ImportFilter'

export default defineConfig({
    ...,
    plugins: [
        ...,
        ImportFilter()
    ]
})

重启工程：

$ npm run dev

重启成功后，工程src目录下会自动创建modules文件夹（默认存放文件夹），结构如下：

-src
--modules           // 模块存放位置
---index.js         // 模块总入口文件, 对外提供getComponents、getConfig两个函数

modules/index.js：开发环境，默认全部模块自动引入。生产环境下，自动根据配置文件（dynamic-module-config.json）过滤，只引入需要的模块，不配置则默认引入全部。

/** index.js开发环境代码，一般情况下不需要修改 */
/**
 * 批量导入modules文件夹下的所以模块的入口文件
 */
const getComponents = async ()=>{
    const imports = import.meta.glob(`./*/index.js`);
    let components = {}
    try{
        for(const path in imports){
            const module = (await imports[path]()).default
            components = {...components, ...module}
        }
    }catch (e){
        throw(e)
    }
    return components
}
/**
 * 批量导入modules文件夹下的所以模块的配置文件文件
 */
const getConfig = async ()=>{
    const imports = import.meta.glob(`./*/config.json`);
    let config = {}
    try{
        for(const path in imports){
            const regex = /.*\/(.*?)\/config.json/;
            const moduleName = path.match(regex)[1]
            const module = (await imports[path]()).default
            config[moduleName] = module
        }
    }catch (e){
        throw(e)
    }
    return config
}

export { getComponents, getConfig}

四、工程引入模块管理类

在main.js文件中引入模块管理

import { createApp } from 'vue'
import './style.css'

import App from './App.vue'
import {ModuleManager} from 'southgis-dynamic-module-loader'
// 根据模块入口文件获取各个模块需要注册的组件，以及各个模块的配置参数
import {getComponents, getConfig} from './modules/index.js'

const app = createApp(App)
const components = await getComponents()
const config = await getConfig()

/**
 * app挂载模块管理插件
 * 1.向app中提供moduleManager上下文对象，可以通过inject('moduleManager')获取模块管理上下文
 * 2.向app中注册全局组件ModuleView，用于显示各个模块注册的组件。
 */
app.use(ModuleManager, components, config)
app.mount('#app')

五、模块

1、新建模块

$ npx create-module TestModule

执行成功后，src/modules会增加TestModule模块，modules文件夹结构如下：

-src
--modules
---TestModule           // 新建模块
----conponents          // 存放模块组件文件夹（可自定义修改）
----TestModule.vue      // 模块入口组件
----index.js            // 模块入口，用于向外导出模块组件
----config.json         // 模块配置文件，用于打包后需要修改的参数配置
---index.js

2、模块入口文件（index.js）

用于对外导出模块组件

import TestModule from './TestModule.vue'

export default {
    TestModule: TestModule,
    // 导出模块中需要对外开放使用的组件
    OtherComponent: ()=>import('./components/OtherComponent.vue') 
}

index.js中对外导出的组件，会注册到app全局组件中，可以通过一下形式进行访问。

// App.vue
<template>
  <TestModule></TestModule>
  // 或者使用ModuleView进行访问
  // 注：ModuleView访问会丢失原组件defineExpose对外暴露的方法，非路由配置建议直接使用全局组件直接访问
  <ModuleView component-name='TestModule'/>
</template>

3、模块配置config.json

假如TestModule模块配置文件中，包含模块的名称配置：

{
    name: '测试模块'
}

Vue组件中可以通过以下方式获取模块配置文件中已配置的内容

import {inject} from 'vue'
const moduleManager = inject('moduleManager')
// moduleManager.config.[模块名称].name
const name = moduleManager.config.TestModule.name

• 开发环境，会直接读取模块下的config.json配置文件。
• 生成环境中，会统一从config/modules-config.json文件中读取
• 工程打包时，会将所有模块下的配置文件内容拷贝到config/modules-config.json

六、ModuleView组件使用

通过指定componentName属性，即可渲染已注册到模块管理的组件。

// App.vue
<template>
    <ModuleView component-name='TestModule'/>
</template>

路由配置中使用

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import {ModuleView} from 'southgis-dynamic-module-loader'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { 
            path: '/testModule', 
            name: '测试模块', 
            component: ModuleView,
            props: {
                componentName: 'TestModule'     // 指定渲染组件名称
            }
        }
        
    ]
})
export default router

七、动态模块开发配置文件dynamic-module-config.json

需要放置在工程跟目录，可配置项如下：

{
    "path": "./src/modules",    // 模块存放路径
    "production": false,        // 模拟生成环境（当前版本配置文件读取可能失效）
    "build": {                  // 打包配置
        "includes": [],         // 需要打包模块
        "excludes": []   // 不需要打包的模块，没有配置includes时使用
    }
}

• 当includes、excludes都为空时，则打包全部模块