Simply use rollup to bundle esm or commonjs or typescript code in browser!
Like Vite in Nodejs! We want to create a brand new bundle environment in browser!
We have made a Compiler System in browser, using plugins to compile Ts, Tsx, Vue SFC, Babel ... to vanilla JS run in browser!
We already create some website just bundling in browser!
-
Native Function
- SystemJS module
- Dynamic Import
- Compiler Worker and Environment Worker
- Plugin Loader (dynamic import plugin easier)
- Iframe Sandbox
- Unified Cache System ( indexedDB now, File System Access later)
- Fetcher Adapter (anyway you like to load source code)
- Config File Loader
-
Plugin Provide
- Vanilla JS and TS Part
- Babel-Core Support
- Babel-plugins Support ( use esm.sh! )
- SWC Support ( SWC is huge in package size! /(ㄒ o ㄒ)/~~ )
- Style Part
- Postcss Support
- CSS Support
- Less Support
- Sass Support
- Tailwindcss Support (Partial)
- Framework Part
- Vue SFC Support
- Solidjs Support
- React Support
- Svelte Support
- StoryBook Support
- Special File Part
- HTML Support
- json Support
- MDX Support
- WASM Support (Vite and ESM Integration)
- Dedicated Worker Support
- classic type worker
- module type worker (recommend)
- Shared Worker
- Polyfill
- Node Builtins Polyfill
- Vanilla JS and TS Part
import {
Compiler,
Evaluator,
} from "https://fastly.jsdelivr.net/npm/rollup-web@4";
// We use Rollup to compile Code!
const RollupConfig = {
plugins: [
// 1. Rollup Plugins used in Nodejs sometimes throw a error
// 2. But we have browser version of them! Keep Reading!
],
};
const compiler = new Compiler(RollupConfig, {
// Provide a web root to resolve relative path in your code
root: "https://localhost:8080/",
// 1. When we use Nodejs to resolve module, you can ignore the extension of file.
// 2. But we actually need a extension to fetch remote file.
// 3. So Compiler will join the origin path with extension in `extensions` each.
// 4. And try to Download them!
extensions: [".tsx", ".ts", ".js", ".json", ".css"],
// If you want to see which file load,it could be helpful.
log(url) {
console.log("%c Download ==> " + url, "color:green");
},
});
// This step will create an Environment to run source code!
const Eval = new Evaluator();
await Eval.createEnv({
Compiler: compiler,
});
// evaluate the code just use url!
await Eval.evaluate("./public/mdx/index.jsx");
- Vue reactive Image src cause error ( use assets plugin to import! )
- Postcss System Import
Apache-2.0