jvilk / BrowserFS

BrowserFS is an in-browser filesystem that emulates the Node JS filesystem API and supports storing and retrieving files from various backends.
Other
3.07k stars 218 forks source link

Using with Rollup #304

Closed brianjenkins94 closed 1 year ago

brianjenkins94 commented 4 years ago

Instructions in the README for usage with Rollup would be greatly appreciated. Here's as far as I got:

rollup.config.js:

import alias from "@rollup/plugin-alias";
import commonJs from "@rollup/plugin-commonjs";
import nodeResolve from "@rollup/plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";

export default {
    "input": "docs/js/main.ts",
    "output": {
        "file": "docs/js/main.js",
        "format": "esm"
    },
    "external": [],
    "plugins": [
        alias({
            "entries": [
                { "find": "buffer", "replacement": "browserfs/dist/shims/buffer" },
                { "find": "fs", "replacement": "browserfs/dist/shims/fs" },
                { "find": "path", "replacement": "browserfs/dist/shims/path" },
                { "find": "processGlobal", "replacement": "browserfs/dist/shims/process.js" },
                { "find": "bufferGlobal", "replacement": "browserfs/dist/shims/bufferGlobal.js" },
                { "find": "bfsGlobal", "replacement": require.resolve("browserfs") }
            ]
        }),
        nodeResolve({ "preferBuiltins": false }),
        commonJs(),
        typescript()
    ],
    "watch": {
        "clearScreen": false
    }
};

main.ts:

import BrowserFS from "browserfs";
import * as fs from "fs";

BrowserFS.configure({ "fs": "IndexedDB", "options": {} }, function(error) {
    if (error) {
        throw new Error(error.toString());
    }
});

Can't seem to get past this issue:

Uncaught ReferenceError: BrowserFS is not defined

Since the commonJs plugin (?) is renaming the BrowserFS import:

+var BrowserFS$1 = /*@__PURE__*/unwrapExports(browserfs);

-var fs = BrowserFS.BFSRequire('fs');

+BrowserFS$1.configure({ "fs": "IndexedDB", "options": {} }, function (error) {
    if (error) {
        throw new Error(error.toString());
    }
});

Seems similar to: https://github.com/jvilk/BrowserFS/issues/201

brianjenkins94 commented 4 years ago

This looks to have done it:

rollup.config.js

import alias from "@rollup/plugin-alias";
import commonJs from "@rollup/plugin-commonjs";
import inject from "@rollup/plugin-inject";
import nodeResolve from "@rollup/plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";

export default {
    "input": "docs/js/main.ts",
    "output": {
        "file": "docs/js/main.js",
        "format": "esm"
    },
    "external": [],
    "plugins": [
        alias({
            "entries": [
                { "find": "buffer", "replacement": "browserfs/dist/shims/buffer" },
                { "find": "fs", "replacement": "browserfs/dist/shims/fs" },
                { "find": "path", "replacement": "browserfs/dist/shims/path" }
            ]
        }),
        nodeResolve({ "preferBuiltins": false }),
        commonJs(),
        typescript(),
        inject({
            "BrowserFS": "browserfs"
        })
    ],
    "watch": {
        "clearScreen": false
    }
};

main.ts

declare const BrowserFS;

import * as buffer from "buffer";
import * as fs from "fs";
import * as path from "path";

BrowserFS.configure({ "fs": "IndexedDB", "options": {} }, function(error) {
    if (error) {
        throw new Error(error.toString());
    }
});