Rollup-web NPM

rollup in Browser!

Simply use rollup to bundle esm or commonjs or typescript code in browser! We have a easy way to do that!

Get Start

import {
    useRollup,
    web_module,
    sky_module,
    ModuleEval,
} from "https://cdn.jsdelivr.net/npm/rollup-web/dist/index.js";

// 导入各种插件
// ! Use esm.sh CDN to load some plugins that don't need to adapt
import { json } from "https://esm.sh/@rollup/plugin-json";
import { alias } from "https://esm.sh/@rollup/plugin-alias";
import { commonjs } from "https://esm.sh/@rollup/plugin-commonjs";
import { replace } from "https://esm.sh/@rollup/plugin-replace";

// Babel and SWC need to init first and use the plugin inside rollup-web
import {
    initBabel,
    babel,
} from "https://cdn.jsdelivr.net/npm/rollup-web/dist/plugins/babel.js";
import {
    initSwc,
    swcPlugin,
} from "https://cdn.jsdelivr.net/npm/rollup-web/dist/plugins/swc.js";
import mocha from "https://esm.run/mocha/mocha.js";

// swc, babel must init before used.
// await initBabel();
await initSwc();

const config = {
    input: "./public/test.ts",
    output: {
        format: "es",
    },
    plugins: [
        json(),
        alias({
            entries: [{ find: "@", replacement: "./" }],
        }),
        commonjs({
            extensions: [".cjs", ".js"],
        }),

        replace({
            __buildDate__: () => JSON.stringify(new Date()),
            __buildVersion: "15",
        }),

        // You can use Babel to compile Typescript! Or other awesome code!
        // babel({
        //     babelrc: {
        //         presets: [Babel.availablePresets.typescript],
        //     },
        //     extensions: [".ts"],
        // }),

        // Swc plugin is used to compile typescript to esm! Yes! Typescript! But dependencies more bigger then babel.
        swcPlugin({
            log(id) {
                console.warn("> " + id);
            },
        }),

        // web_module can get code file from your web site!
        web_module({
            // 如果不设置 root， 则是相对于网页的 url 进行获取
            // 甚至可以对 npm 包进行动态打包！
            // root: 'https://cdn.jsdelivr.net/npm/skypack-api/',
            extension: ".ts",

            log(url) {
                console.log("%c " + url, "color:green");
            },
        }),

        // some package in node_module (We don't use it!) will be redirected to a ESM cdn! (if it can run in the browser...)
        // but we actually don't download the source code!
        sky_module({
            cdn: "https://esm.run/",
        }),
    ],
};
const res = await useRollup(config);

// just run the cooked code !
const module = await ModuleEval(res);

Babel

Babel’s Presets and Plugins

We can load presets and plugins from esn.sh. Like that:

// It's an example to load tsx (SolidJS)
import SolidPresets from 'https://esm.sh/babel-preset-solid@1.3.13';

// after load presets we just use it!
babel({
    babelrc: {
        presets: [SolidPresets],
    },
    // you need add .tsx to load your file
    extensions: [".tsx"],
    log(id) {
        console.warn("> " + id);
    },
}),