browser-rollup

Rollup in Browser !

This repository implements the basic plug-in library for Rollup on the browser side, so that we can use Rollup plug-ins on the browser side.

1. Compile and run the Type script! Directly in the browser! Yes!
2. Compile directly in the browser using CommonJS! Yes!
3. Compile with Babel directly in the browser! Yes! \n

First—— Use Rollup.browser.js!

Rollup officials specially packaged the browser version of Rollup for us! So we can use it directly through NPM or JSdelivr. But You Need A File System Polyfill!

// You can see rollup.browser.js is under the /dist/es/ folder!
import * as rollup from "https://cdn.jsdelivr.net/npm/rollup/dist/es/rollup.browser.js";

// We will know how to fill this Config next stage
const rollupConfig = {};

// This is a simple version of how to pack your code
const generated = await Rollup(rollupConfig).then((res) => {
    if (output instanceof Array) {
        return res.generate(output[0]);
    } else if (output) {
        return res.generate(output);
    } else {
        throw new Error("Rollup: 请填写 output 属性");
    }
});

Second —— Make a File System in any way!

Actually, you can just make a Rollup Plugin to resolve the path of your code! I like to call it an adapter.

// adapter.js
// use path in browser!
import { dirname, resolve } from "https://cdn.skypack.dev/path-browserify";

// We can set any way to read source code use readFile
export const adapter = (readFile) => ({
    // It's just a pool code of resolving the path
    // Your need to resolve it yourself!
    async resolveId(thisFile, importer) {
        if (!importer) return thisFile;
        if (thisFile[0] !== ".") return false;

        let resolved = resolve(dirname(importer), thisFile).replace(
            /^\.\//,
            ""
        );
        return resolved;
    },

    // load is a Function to get your source code.
    // It can be a Async Function
    load(path) {
        // 从这里进行导入字符串格式代码
        return readFile(path);
    },
});

Third——Use Rollup Config and Use Rollup Plugin!

// Use JSDelivr CDN we can load some plugin like this
import json from "https://cdn.jsdelivr.net/npm/browser-rollup/dist/plugin-json.js";
import alias from "https://cdn.jsdelivr.net/npm/browser-rollup/dist/plugin-alias.js";
import replace from "https://cdn.jsdelivr.net/npm/browser-rollup/dist/plugin-replace.js";
import commonjs from "https://cdn.jsdelivr.net/npm/browser-rollup/dist/plugin-commonjs.js";

// more plugin please look /dist folder

// put this plugin to the first stage!
const rollupConfig = {
    input: "index.js",
    output: {
        file: "dist/index.js",
        format: "es",
    },
    plugins: [
        // it's just a lot of pool setting of my demo!
        json(),
        alias({
            entries: [{ find: "utils", replacement: "./utils.js" }],
        }),
        replace({
            "process.env.NODE_ENV": JSON.stringify("production"),
            __buildDate__: () => JSON.stringify(new Date()),
            __buildVersion: 15,
        }),
        commonjs(),
        // readFile is your way to load code
        adapter(readFile),
    ],
};

One more thing！

1. About plugin-babel

Babel is awesome! Babel can compile typescript and many other, and they carefully make browser version in their project!

So we use plugin-babel must load Babel first! like this!

// It will inject a Global Babel in window，So it must be the first to load
import "https://cdn.jsdelivr.net/npm/@babel/standalone@7.16.9";
import babel from "https://cdn.jsdelivr.net/npm/browser-rollup/dist/plugin-babel.js";

// babel is the same Function to @rollup/plugin-babel

1. About commonjs

// Use babel like this!
// commonjs will compile require and some special syntax to es5
commonjs({
    extensions: [".cjs"],
});

1. About typescript!

// Use babel like this!
commonjs({
    // My project mixed some commonjs ,so I need it
    extensions: [".cjs", ""],
}),
babel({
    // Yes , Babel provide most common used preset in it's bundle
    presets: [Babel.availablePresets["typescript"]],
    babelHelpers: "runtime",
    // specially add next line, something Bug I can not understand, but use this way to avoid it.
    extensions: [".js", ".jsx", ".es6", ".es", ".mjs"],
}),

Do you have any questions? Look the Demo Project in /demo!

You do not know how to use plugin? Search Npm @rollup/plugin-* It will help you!

Thanks to @rollup/plugin project in npm, all efforts are theirs.