Vite Plugin Legacy Qiankun

screenshot of Vite Plugin Legacy Qiankun
vite

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

Overview

The vite-plugin-legacy-qiankun is an innovative solution designed to seamlessly integrate Vite with the qiankun micro-frontend framework. It aims to provide a smooth development experience while ensuring a stable production environment, complete with sandboxing features. With its robust capabilities, this plugin caters to modern web development needs by addressing compatibility and isolation requirements effectively.

As more developers adopt Vite for its speed and efficiency, this plugin bridges the gap between Vite and qiankun, allowing for the use of multiple frameworks such as Vue3, Vue2, and React without a hitch. Its focus on maintaining isolated environments in production and flexible development options makes it a must-try for anyone working with micro-frontends.

Features

  • Native Module Support: Utilizes native modules to enhance compatibility across various frameworks, ensuring a smooth workflow in the development environment.
  • Production JS Sandbox: Guarantees that JavaScript runs in an isolated production environment, minimizing risks associated with code interference.
  • Production CSS Sandbox: Ensures that CSS is also sandboxed in production, preserving styles and preventing unexpected alterations from other applications.
  • Development CSS Sandbox: Offers sandboxing for CSS during development, allowing for experimental styles without affecting the overall project.
  • Development JS Sandbox: Provides a setting (devSandbox = true) for isolating JavaScript in the development phase, still under testing but adding flexibility to the development process.
  • Multi-Framework Flexibility: Fully supports the integration of Vue2, Vue3, and React within the Vite environment, making it versatile for various project requirements.
  • Easy Installation: Requires Vite version 3 or higher, streamlining the setup process for rapid deployment.
vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.