ice-lab / icestark

:tiger: Micro Frontends solution for large application(面向大型应用的微前端解决方案),站点国内镜像:https://icestark.gitee.io
https://micro-frontends.ice.work
MIT License
2.04k stars 173 forks source link

微模块加载支持数组形式 #119

Closed ClarkXia closed 4 years ago

ClarkXia commented 4 years ago

背景

微模块目前通过 url 方式只能加载一个 umd 模块文件,模块依赖和模块依赖的样式没有可以直接加载的方式,希望可以提供

方案

url 支持数组形式,自动分析样式文件和脚本文件

import { MicroModule } from '@ice/stark-module';

const App = () => {
  const moduleInfo = {
    name: 'moduleName',
    url: ['https://localhost/module.css', 'https://localhost/react.js', 'https://localhost/module.js'],
  }
  return <MicroModule moduleInfo={moduleInfo} />;
}

由于需要知道模块的入口文件是哪个,对于 js 文件指定顺序有所要求,默认最后加载的 js 文件为模块文件

myronliu347 commented 4 years ago

另外希望补充两点功能

ClarkXia commented 4 years ago

@ice/stark-module 版本 1.1.0 已支持

xmsz commented 1 year ago

这个希望在文档里能说明一下 第一次发现

  1. 文档里的module.js并不是真实存在,大部分情况下指向的是/dist/index.js
  2. 文档里没有提到index.css并不会自动引入
  3. 文档里没有说明url可以是数组模式,导致不知道如何引入样式

后面才试出来

const moduleInfo = {
  name: 'ApiExplorer',
  url: [
    `http://127.0.0.1:5500/apps/api-explorer/dist/index/index.js?v=${+new Date()}`,
    `http://127.0.0.1:5500/apps/api-explorer/dist/index/index.css?v=${+new Date()}`,
  ],
  runtime: `http://127.0.0.1:5500/apps/api-explorer/dist/index/runtime.json?v=${+new Date()}`
}