Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/coconilu/vite-plugin-remain-exports
Remaining exports from the entry file that imported by html.
https://github.com/coconilu/vite-plugin-remain-exports
exports plugin vite
Last synced: 4 months ago
JSON representation
Remaining exports from the entry file that imported by html.
- Host: GitHub
- URL: https://github.com/coconilu/vite-plugin-remain-exports
- Owner: coconilu
- Created: 2022-03-11T05:45:42.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-04-05T13:27:22.000Z (almost 3 years ago)
- Last Synced: 2024-09-20T01:45:38.461Z (5 months ago)
- Topics: exports, plugin, vite
- Language: TypeScript
- Homepage:
- Size: 43 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[_简体中文_](README.zh-cn.md) | _English_
# Vite-Plugin-Remain-Exports
This plugin is aimed to remaining the exports from entry scripts that imported by entry HTML.
## 1. Use case
It is important for those micro frond-end project builded with ES-Module style.
Some micro frond-end framework, like IceStark, need each micro modules export two life-cycle: mount and unmount.
If entry scripts can't export those two life-cycle, the micro module would't been rendered to page.
## 2. Usage
### 2.1 Install
```bash
npm i -D vite-plugin-remain-exports
yarn add -D vite-plugin-remain-exports
pnpm i -D vite-plugin-remain-exports
```
### 2.2 Using plugin
```ts
import remainExports from 'vite-plugin-remain-exports'
// @see https://vitejs.dev/config/
export default defineConfig({
plugins: [
// ...other plugins
remainExports(),
],
})
```
## 3. Core Theory
As follow, it is an entry html in vite project：
```HTML
Vite App
```
And the entry scripts imported by entry html is `/src/main.tsx`.
### 3.1 How entry html was handled by vite
By default, vite will transfer the entry html to the following js code:
```javascript
import "vite/modulepreload-polyfill";
import "/src/main.tsx";
```
The build process of vite is based on rollup. For the rollup project, entry html is the entry file. And in the build process, rollup will only remain the exports of entry file, then tree-shaking other depends.
So for remaining the entry scripts (`main.tsx`) exports, we need some magic. Here leading in a concept -- module double.
### 3.2 Module double
```typescript
// index.ts
export * from 'another.ts'
// another.ts
export const demo = 1;
```
For importers, `index.ts` and `another.ts` is working the same.
### 3.3 Plugin core
After introducing how entry html was handled by vite and the module double concept, we can modify the transfer result of entry html, as following:
```javascript
export * from "vite/modulepreload-polyfill";
export * from "/src/main.tsx";
```
Thus, for vite user, the entry scripts （`main.tsx`）work as the entry file, and the exports of them will can be remained.