BrowserFS icon indicating copy to clipboard operation
BrowserFS copied to clipboard

Using with Rollup

Open brianjenkins94 opened this issue 3 years ago • 1 comments

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 avatar Sep 27 '20 22:09 brianjenkins94

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());
	}
});

brianjenkins94 avatar Sep 28 '20 22:09 brianjenkins94