What is brfs?
The brfs npm package is a browserify transform that allows you to inline the contents of files into your JavaScript bundle. It is particularly useful for including static assets like HTML, CSS, or text files directly into your JavaScript code, making it easier to manage dependencies and resources in a single bundle.
What are brfs's main functionalities?
Inline File Contents
This feature allows you to read the contents of a file and inline it directly into your JavaScript code. The example demonstrates how to read an HTML file and log its contents to the console.
const fs = require('fs');
const html = fs.readFileSync(__dirname + '/template.html', 'utf8');
console.log(html);
Transform Static Assets
This feature enables you to include static assets like CSS files directly into your JavaScript bundle. The example shows how to read a CSS file and log its contents to the console.
const fs = require('fs');
const css = fs.readFileSync(__dirname + '/styles.css', 'utf8');
console.log(css);
Other packages similar to brfs
browserify
Browserify is a tool that allows you to use Node.js-style require() statements in the browser. While brfs is a transform for browserify to inline file contents, browserify itself is a more general tool for bundling JavaScript files and their dependencies for use in the browser.
webpack
Webpack is a module bundler that can handle various types of assets, including JavaScript, CSS, and HTML. It offers more advanced features like code splitting and hot module replacement. Compared to brfs, webpack provides a more comprehensive solution for managing and bundling assets.
rollup
Rollup is a module bundler for JavaScript that focuses on creating smaller and faster bundles. It supports various plugins to handle different types of assets. While brfs is specifically for inlining file contents, Rollup offers a broader range of functionalities for optimizing and bundling JavaScript code.
brfs
browserify fs.readFileSync() static asset inliner
This module is a plugin for browserify to parse the AST
for fs.readFileSync()
calls so that you can inline file contents into your
bundles.
Even though this module is intended for use with browserify, nothing about it is
particularly specific to browserify so it should be generally useful in other
projects.
example
for a main.js:
var fs = require('fs');
var html = fs.readFileSync(__dirname + '/robot.html');
console.log(html);
and a robot.html:
<b>beep boop</b>
first npm install brfs
into your project, then:
on the command-line
$ browserify -t brfs example/main.js > bundle.js
now in the bundle output file,
var html = fs.readFileSync(__dirname + '/robot.html');
turns into:
var html = "<b>beep boop</b>\n";
or with the api
var browserify = require('browserify');
var fs = require('fs');
var b = browserify('example/main.js');
b.transform('brfs');
b.bundle().pipe(fs.createWriteStream('bundle.js'));
methods
brfs looks for fs.readFileSync(pathExpr, enc='utf8')
calls.
The pathExpr
function is evaluated as an expression with __dirname
and
__filename
variables available.
If you want differently-encoded file contents for your inline content you can
set enc
to 'base64'
or 'hex'
.
If you want to use this plugin directly, not through browserify, the api
follows.
var brfs = require('brfs')
var tr = brfs(file)
Return a through stream tr
inlining fs.readFileSync()
file contents
in-place.
usage
A tiny command-line program ships with this module to make debugging easier.
usage:
brfs file
Inline `fs.readFileSync()` calls from `file`, printing the transformed file
contents to stdout.
brfs
brfs -
Inline `fs.readFileSync()` calls from stdin, printing the transformed file
contents to stdout.
install
With npm do:
npm install brfs
then use -t brfs
with the browserify command or use .transform('brfs')
from
the browserify api.
license
MIT