lishaobos / vite-plugin-legacy-qiankun Goto Github PK

View Code? Open in Web Editor NEW

102.0 3.0 10.0 894 KB

让 vite 集成 qiankun，支持 js，css 沙箱

JavaScript 30.84% TypeScript 39.76% HTML 14.64% Vue 14.09% CSS 0.66%

qiankun vite

vite-plugin-legacy-qiankun's Introduction

vite-plugin-legacy-qiankun

让 vite 丝滑兼容 qiankun，且生产环境保证沙箱环境。

example

安装

npm i vite-plugin-legacy-qiankun @vitejs/plugin-legacy -D

版本需要

vite >= 3

特性

保留 native module
生产环境 js 沙箱
生产环境 css 沙箱
开发环境 css 沙箱
开发环境 js 沙箱（设置 devSandbox = true 使用，还在测试中）

使用

vue3 + vite

// main.js
import { createLifecyle, getMicroApp } from 'vite-plugin-legacy-qiankun'
import { createRouter, createWebHistory } from 'vue-router'
import pkg from '../package.json' // your micro app name (pkg.name)

const microApp = getMicroApp(pkg.name)

const router = createRouter({
  history: createWebHistory(microApp.__POWERED_BY_QIANKUN__ ? pkg.name : '/'),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./home.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./about.vue')
    }
  ]
})

const render = () => {
  createApp(App)
    .use(router)
    .mount(`#app_p3`)
}

if (microApp.__POWERED_BY_QIANKUN__) {
  createLifecyle(pkg.name, {
    mount(props) {
      console.log('mount', pkg.name);
      render();
    },
    bootstrap() {
      console.log('bootstrap', pkg.name);
    },
    unmount() {
      console.log('unmount', pkg.name)
    }
  })
} else {
  render();
}

vue2 + vite

// main.js
import { createLifecyle, getMicroApp } from 'vite-plugin-legacy-qiankun'
import VueRouter from 'vue-router'
import pkg from '../package.json' // your micro app name (pkg.name)

const microApp = getMicroApp(pkg.name)

const router = new VueRouter({
  mode: 'history',
  base: microApp.__POWERED_BY_QIANKUN__ ? pkg.name : '/',
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./home.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./about.vue')
    }
  ]
})

const render = () => {
  new Vue({
    router,
    render: (h) => h(App)
  }).$mount('#app_p3')
}

if (microApp.__POWERED_BY_QIANKUN__) {
  createLifecyle(pkg.name, {
    mount(props) {
      console.log('mount', pkg.name);
      render();
    },
    bootstrap() {
      console.log('bootstrap', pkg.name);
    },
    unmount() {
      console.log('unmount', pkg.name)
    }
  })
} else {
  render();
}

react + vite

// main.jsx
import { createLifecyle, getMicroApp } from 'vite-plugin-legacy-qiankun'

const render = () => {
  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  )
}

const microApp = getMicroApp(pkg.name)

if (microApp.__POWERED_BY_QIANKUN__) {
  createLifecyle(pkg.name, {
    mount(props) {
      console.log('mount', pkg.name);
      render();
    },
    bootstrap() {
      console.log('bootstrap', pkg.name);
    },
    unmount() {
      console.log('unmount', pkg.name)
    }
  })
} else {
  render();
}

vite.config

react

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import legacy from '@vitejs/plugin-legacy' // need this
import { legacyQiankun } from 'vite-plugin-legacy-qiankun'

export default defineConfig({
  server: {
    origin: 'http://127.0.0.1:xxx', // 解决资源访问
  },
  plugins: [
    react({ fastRefresh: false }),
    legacy(),
    legacyQiankun({
      name: 'your micro app name',
      devSandbox: true  
    })
  ]
})

vue2

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import legacy from '@vitejs/plugin-legacy' // need this
import { legacyQiankun } from 'vite-plugin-legacy-qiankun'

export default defineConfig({
  server: {
    origin: 'http://127.0.0.1:xxx', // 解决资源访问
  },
  plugins: [
    createVuePlugin(),
    legacy(),
    legacyQiankun({
      name: 'your micro app name',
      devSandbox: true  
    })
  ]
})

vue3

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy' // need this
import { legacyQiankun } from 'vite-plugin-legacy-qiankun'

export default defineConfig({
  server: {
    origin: 'http://127.0.0.1:xxx', // 解决资源访问
  },
  plugins: [
    vue(),
    legacy(),
    legacyQiankun({
      name: 'your micro app name',
      devSandbox: true  
    })
  ]
})

vite-plugin-legacy-qiankun's People

Contributors

Stargazers

Watchers

Forkers

liu-huitao erduojiang ctzhida zhouxiangjian ywww paul-leo kongminglatern

vite-plugin-legacy-qiankun's Issues

您好，请教一下，为啥我按照示例写的，一直报错：died in status NOT_MOUNTED: Cannot read properties of undefined

这个是报错的内容，我看了其他的issues，您回复的说是微应用的名称不对，但是我反复检查了，没有错误
用另一个vite-plugin-qiankun是好的，但是不支持沙箱，麻烦您帮我看看是啥问题呢？

main.ts：

vite.config.ts

整个项目就按照示例改了这两个文件

这个是依赖包

主子应用都是vite+vue，因为渲染的根节点都是#app所以子应用一加载就把主应用的#app替换了导致崩溃

jeecg vue3 使用 vite-plugin-legacy-qiankun 全局引入 Swiper 失效

只要使用手动加载就报错，在mac和window平台试过都这样

node：18.7.0
vite：4.5.0
主应用：vue3.3
子应用：vue2.7

import { loadMicroApp } from 'qiankun'

loadMicroApp({
    name: 'demo2',
    entry: '//localhost:5175',
    container: '#appContainer',
    activeRule: '/',
    props: {
      parentStore: '11111',
      msg: '我是父应用传过来的值,传递给B应用'
    }
  })

问题：在TS环境中按照示例进行配置，legacyQiankun报类型错误。
版本: -React : 18.2.0
-Vite: 4.1.4
-Vite-plugin-legacy-qiankun: 0.0.2
-Typescript: 4.9.3

复现：https://stackblitz.com/edit/vitejs-vite-snsyq5?file=vite.config.ts&terminal=dev

同时加载两个同名的子应用会出现错乱

当主应用加载两个同名的子应用时，真实window上的legacyQiankun对象中子应用名称对应的沙箱实例、生命周期函数等会被后加载的子应用覆盖，build和dev下第二个子应用都无法加载，请问有什么解决方案吗

为什么不添加legacy()，打包出来的项目就运行不了

没有做到基座和子应用的css样式隔离呀

在你的示例代码, 开发环境我在main/App.vue 上加了
.container {
color: green;
border: 1px solid;
}

子应用也有这个样式, build打包后也是一样

子应用使用vite + vue3 ,第二次打开qiankun-head中丢失style信息

第二张图片是正常打开时的情况

主应用访问子应用报'import.meta' outside a module

主应用和子应用都是jeecg这个开源项目，都是vue3 + vite。子应用中用了vite-plugin-legacy-qiankun插件。但是我在主应用中访问子应用会报SyntaxError: Cannot use 'import.meta' outside a module这个错误。请问有遇到过或者有什么解决方法么？

开发环境 js 沙箱大佬目前是打算怎么实现呢？

子应用React18+vite 搭建报错

你好，我的应用构建是这样的:
主应用基座是 React18+vite (正常)
子应用Vu3+vite （正常）
子应用React18+vite (报错) ，报错显示：
app-errors.js:11 Uncaught Error: application 'react-app' died in status BOOTSTRAPPING: React refresh runtime was loaded twice. Maybe you forgot the base path? at @react-refresh:665:11
如果React子应用中使用了函数式组件就会报上述错误

两个应用来回切换报错

index-legacy-eadb6705.js:29 Error: http://192.168.0.116:8082/CoreUI_App/assets/index-legacy-4470f73e.js (SystemJS https://github.com/systemjs/systemjs/blob/main/docs/errors.md#2)
at eval (polyfills-legacy-758f4cb6.js:1:115007)

两个子应用都是vue3 + vite
请问大佬这个要怎么解决？

pkg.name含有空格或横线时会报错

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'
import legacy from '@vitejs/plugin-legacy' // need this
import { legacyQiankun } from 'vite-plugin-legacy-qiankun'

export default defineConfig({
  ...
  plugins: [
    vue(),
    legacy(),
    legacyQiankun({ name: 'your micro app name' })
  ],
  ...
}

开发环境报错：