• Stars
    star
    563
  • Rank 79,150 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 11 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

browserify fs.readFileSync() static asset inliner

brfs

fs.readFileSync() and fs.readFile() static asset browserify transform

build status

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', 'utf8');
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', 'utf8');

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'));

async

You can also use fs.readFile():

var fs = require('fs');
fs.readFile(__dirname + '/robot.html', 'utf8', function (err, html) {
    console.log(html);
});

When you run this code through brfs, it turns into:

var fs = require('fs');
process.nextTick(function () {(function (err, html) {
    console.log(html);
})(null,"<b>beep boop</b>\n")});

methods

brfs looks for:

  • fs.readFileSync(pathExpr, enc=null)
  • fs.readFile(pathExpr, enc=null, cb)
  • fs.readdirSync(pathExpr)
  • fs.readdir(pathExpr, cb)

Inside of each pathExpr, you can use statically analyzable expressions and these variables and functions:

  • __dirname
  • __filename
  • path if you var path = require('path') first
  • require.resolve()

Just like node, the default encoding is null and will give back a Buffer. If you want differently-encoded file contents for your inline content you can set enc to 'utf8', 'base64', or 'hex'.

In async mode when a callback cb is given, the contents of pathExpr are inlined into the source inside of a process.nextTick() call.

When you use a 'file'-event aware watcher such as watchify, the inlined assets will be updated automatically.

If you want to use this plugin directly, not through browserify, the api follows.

var brfs = require('brfs')

var tr = brfs(file, opts)

Return a through stream tr inlining fs.readFileSync() file contents in-place.

Optionally, you can set which opts.vars will be used in the static argument evaluation in addition to __dirname and __filename.

opts.parserOpts can be used to configure the parser brfs uses, acorn.

events

tr.on('file', function (file) {})

For every file included with fs.readFileSync() or fs.readFile(), the tr instance emits a 'file' event with the file path.

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.

gotchas

Since brfs evaluates your source code statically, you can't use dynamic expressions that need to be evaluated at run time. For example:

// WILL NOT WORK!
var file = window.someFilePath;
var str = require('fs').readFileSync(file, 'utf8');

Instead, you must use simpler expressions that can be resolved at build-time:

var str = require('fs').readFileSync(__dirname + '/file.txt', 'utf8');

Another gotcha: brfs does not yet support ES module import statements. See brfs-babel for an experimental replacement that supports this syntax.

license

MIT

More Repositories

1

browserify

browser-side require() the node.js way
JavaScript
14,579
star
2

browserify-handbook

how to build modular applications with browserify
JavaScript
4,584
star
3

watchify

watch mode for browserify builds
JavaScript
1,788
star
4

events

Node's event emitter for all engines.
JavaScript
1,370
star
5

resolve

Implements the node.js require.resolve() algorithm
JavaScript
774
star
6

crypto-browserify

partial implementation of node's `crypto` for the browser
JavaScript
652
star
7

wzrd.in

browserify as a service.
JavaScript
636
star
8

browserify-website

the code that runs http://browserify.org
HTML
588
star
9

rustify

Rust WebAssembly transform for Browserify
JavaScript
494
star
10

webworkify

launch a web worker that can require() in the browser with browserify
JavaScript
416
star
11

detective

Find all calls to require() no matter how deeply nested using a proper walk of the AST
JavaScript
414
star
12

tinyify

a browserify plugin that runs various optimizations, so you don't have to install them all manually. makes your bundles tiny!
JavaScript
411
star
13

factor-bundle

factor browser-pack bundles into common shared bundles
JavaScript
402
star
14

commonjs-assert

Node.js's require('assert') for all engines
JavaScript
293
star
15

sha.js

Streamable SHA hashes in pure javascript
JavaScript
287
star
16

http-browserify

node's http module, but for the browser
JavaScript
244
star
17

node-util

node.js util module as a module
JavaScript
244
star
18

module-deps

walk the dependency graph to generate a stream of json output
JavaScript
209
star
19

vm-browserify

require('vm') like in node but for the browser
JavaScript
200
star
20

bundle-collapser

convert bundle paths to IDs to save bytes in browserify bundles
JavaScript
195
star
21

pbkdf2

PBKDF2 with any supported hashing algorithm in Node
JavaScript
189
star
22

browser-pack

pack node-style source files from a json stream into a browser bundle
JavaScript
174
star
23

static-eval

evaluate statically-analyzable expressions
JavaScript
171
star
24

path-browserify

The path module from Node.js for browsers
JavaScript
168
star
25

common-shakeify

browserify tree shaking plugin using `common-shake`
JavaScript
105
star
26

stream-browserify

the stream module from node core for browsers
JavaScript
101
star
27

browser-resolve

resolve function which support the browser field in package.json
JavaScript
101
star
28

randombytes

random bytes from browserify stand alone
JavaScript
99
star
29

diffie-hellman

pure js diffie-hellman
JavaScript
94
star
30

awesome-browserify

🔮 A curated list of awesome Browserify resources, libraries, and tools.
88
star
31

syntax-error

detect and report syntax errors in source code strings
JavaScript
79
star
32

static-module

convert module usage to inline expressions
JavaScript
74
star
33

ify-loader

Webpack loader to handle browserify transforms as intended.
JavaScript
68
star
34

browserify-aes

aes, for browserify
JavaScript
62
star
35

createHmac

Node style HMAC for use in the browser, with native implementation in node
JavaScript
62
star
36

browserify-zlib

Full zlib module for browserify
JavaScript
57
star
37

browser-unpack

parse a bundle generated by browser-pack
JavaScript
55
star
38

stream-splicer

streaming pipeline with a mutable configuration
JavaScript
55
star
39

createHash

Node style hashes for use in the browser, with native hash functions in node
JavaScript
52
star
40

md5.js

node style md5 on pure JavaScript
JavaScript
44
star
41

browserify-sign

createSign and createVerify in your browser
JavaScript
43
star
42

labeled-stream-splicer

stream splicer with labels
JavaScript
42
star
43

console-browserify

Emulate console for all the browsers
JavaScript
33
star
44

ripemd160

JavaScript component to compute the RIPEMD160 hash of strings or bytes.
JavaScript
32
star
45

buffer-xor

A simple module for bitwise-xor on buffers
JavaScript
30
star
46

publicEncrypt

publicEncrypt/privateDecrypt for browserify
JavaScript
29
star
47

insert-module-globals

insert implicit module globals into a module-deps stream
JavaScript
26
star
48

createECDH

browserify version of crypto.createECDH
JavaScript
24
star
49

timers-browserify

timers module for browserify
JavaScript
24
star
50

parse-asn1

JavaScript
21
star
51

EVP_BytesToKey

JavaScript
20
star
52

browserify-rsa

JavaScript
19
star
53

cipher-base

abstract base class for crypto-streams
JavaScript
18
star
54

browserify-cipher

JavaScript
18
star
55

tty-browserify

the tty module from node core for browsers
JavaScript
17
star
56

deps-sort

sort module-deps output for deterministic browserify bundles
JavaScript
16
star
57

acorn-node

the acorn javascript parser, preloaded with plugins for syntax parity with recent node versions
JavaScript
13
star
58

admin

administrative procedures for the browserify org
12
star
59

hash-base

abstract base class for hash-streams
JavaScript
11
star
60

discuss

discuss project organization, initiatives, and whatever!
11
star
61

browserify-des

DES for browserify
JavaScript
10
star
62

randomfill

JavaScript
9
star
63

buffer-reverse

A lite module for byte reversal on buffers.
JavaScript
6
star
64

detective-esm

find es module dependencies [experimental]
JavaScript
3
star
65

hash-test-vectors

JavaScript
3
star
66

pseudorandombytes

pseudorandombytes for the browser
JavaScript
3
star
67

perf-hooks-browserify

[WIP] The perf_hooks node module API for browserify
JavaScript
3
star
68

.github

Housing of Browserify's GitHub configuration and base files
2
star
69

timing-safe-equal

JavaScript
1
star
70

scrypt

JavaScript
1
star