Skip to content

Repository files navigation

browserify

Make node-style require() work in the browser with a server-side build step, as if by magic!

build status

browserify!

example

Just write an entry.js to start with some require()s in it:

// use relative requiresvarfoo=require('./foo');varbar=require('../lib/bar');// or use modules installed by npm in node_modules/vardomready=require('domready');domready(function(){varelem=document.getElementById('result');elem.textContent=foo(100)+bar('baz');});

Now just use the browserify command to build a bundle starting at entry.js:

$ browserify entry.js -o bundle.js

All of the modules that entry.js needs are included in the final bundle from a recursive walk using detective.

To use the bundle, just toss a <script src="bundle.js"></script> into your html!

usage

Usage: browserify [entry files] {OPTIONS}
Options:
--outfile, -o Write the browserify bundle to this file.
If unspecified, browserify prints to stdout. --require, -r A module name or file to bundle.require()
Optionally use a colon separator to set the target. --entry, -e An entry point of your app --exports Export these core objects, comma-separated list
with any of: require, process. If unspecified, the
export behavior will be inferred.
--ignore, -i Ignore a file --alias, -a Register an alias with a colon separator: "to:from"
Example: --alias 'jquery:jquery-browserify' --cache, -c Turn on caching at $HOME/.config/browserling/cache.json or use
a file for caching.
[default: true]
--debug, -d Switch on debugging mode with //@ sourceURL=...s. [boolean]
--plugin, -p Use a plugin.
Example: --plugin aliasify --prelude Include the code that defines require() in this bundle.
[boolean] [default: true]
--watch, -w Watch for changes. The script will stay open and write updates
to the output every time any of the bundled files change.
This option only works in tandem with -o. --verbose, -v Write out how many bytes were written in -o mode. This is
especially useful with --watch. --help, -h Show this message 

compatibility

Many npm modules that don't do IO will just work after being browserified. Others take more work.

coffee script should pretty much just work. Just do browserify entry.coffee or require('./foo.coffee').

Many node built-in modules have been wrapped to work in the browser. All you need to do is require() them like in node.

  • events
  • path
  • vm
  • http
  • crypto
  • assert
  • url
  • buffer
  • buffer_ieee754
  • util
  • querystring
  • stream

process

Browserify makes available a faux process object to modules with these attributes:

  • nextTick(fn) - uses the postMessage trick for a faster setTimeout(fn, 0) if it can
  • title - set to 'browser' for browser code, 'node' in regular node code
  • browser - true, good for testing if you're in a browser or in node

By default the process object is only available inside of files wrapped by browserify. To expose it, use --exports=process

__dirname

The faux directory name, scrubbed of true directory information so as not to expose your filesystem organization.

__filename

The faux file path, scrubbed of true path information so as not to expose your filesystem organization.

package.json

In order to resolve main files for projects, the package.json "main" field is read.

If a package.json has a "browserify" field, you can override the standard "main" behavior with something special just for browsers.

See dnode's package.json for an example of using the "browserify" field.

more

install

With npm do:

npm install -g browserify

test

To run the node tests with tap, do:

npm test

To run the testling tests, create a browserling account then:

cd testling
./test.sh

About

browser-side require() the node.js way

Resources

Stars

0 stars

Watchers

2 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - ql-io/node-browserify: browser-side require() the node.js way · GitHub
Skip to content

Repository files navigation

browserify

Make node-style require() work in the browser with a server-side build step, as if by magic!

build status

browserify!

example

Just write an entry.js to start with some require()s in it:

// use relative requiresvarfoo=require('./foo');varbar=require('../lib/bar');// or use modules installed by npm in node_modules/vardomready=require('domready');domready(function(){varelem=document.getElementById('result');elem.textContent=foo(100)+bar('baz');});

Now just use the browserify command to build a bundle starting at entry.js:

$ browserify entry.js -o bundle.js

All of the modules that entry.js needs are included in the final bundle from a recursive walk using detective.

To use the bundle, just toss a <script src="bundle.js"></script> into your html!

usage

Usage: browserify [entry files] {OPTIONS}
Options:
--outfile, -o Write the browserify bundle to this file.
If unspecified, browserify prints to stdout. --require, -r A module name or file to bundle.require()
Optionally use a colon separator to set the target. --entry, -e An entry point of your app --exports Export these core objects, comma-separated list
with any of: require, process. If unspecified, the
export behavior will be inferred.
--ignore, -i Ignore a file --alias, -a Register an alias with a colon separator: "to:from"
Example: --alias 'jquery:jquery-browserify' --cache, -c Turn on caching at $HOME/.config/browserling/cache.json or use
a file for caching.
[default: true]
--debug, -d Switch on debugging mode with //@ sourceURL=...s. [boolean]
--plugin, -p Use a plugin.
Example: --plugin aliasify --prelude Include the code that defines require() in this bundle.
[boolean] [default: true]
--watch, -w Watch for changes. The script will stay open and write updates
to the output every time any of the bundled files change.
This option only works in tandem with -o. --verbose, -v Write out how many bytes were written in -o mode. This is
especially useful with --watch. --help, -h Show this message 

compatibility

Many npm modules that don't do IO will just work after being browserified. Others take more work.

coffee script should pretty much just work. Just do browserify entry.coffee or require('./foo.coffee').

Many node built-in modules have been wrapped to work in the browser. All you need to do is require() them like in node.

  • events
  • path
  • vm
  • http
  • crypto
  • assert
  • url
  • buffer
  • buffer_ieee754
  • util
  • querystring
  • stream

process

Browserify makes available a faux process object to modules with these attributes:

  • nextTick(fn) - uses the postMessage trick for a faster setTimeout(fn, 0) if it can
  • title - set to 'browser' for browser code, 'node' in regular node code
  • browser - true, good for testing if you're in a browser or in node

By default the process object is only available inside of files wrapped by browserify. To expose it, use --exports=process

__dirname

The faux directory name, scrubbed of true directory information so as not to expose your filesystem organization.

__filename

The faux file path, scrubbed of true path information so as not to expose your filesystem organization.

package.json

In order to resolve main files for projects, the package.json "main" field is read.

If a package.json has a "browserify" field, you can override the standard "main" behavior with something special just for browsers.

See dnode's package.json for an example of using the "browserify" field.

more

install

With npm do:

npm install -g browserify

test

To run the node tests with tap, do:

npm test

To run the testling tests, create a browserling account then:

cd testling
./test.sh

About

browser-side require() the node.js way

Resources

Stars

0 stars

Watchers

2 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - ql-io/node-browserify: browser-side require() the node.js way · GitHub
Skip to content

Repository files navigation

browserify

Make node-style require() work in the browser with a server-side build step, as if by magic!

build status

browserify!

example

Just write an entry.js to start with some require()s in it:

// use relative requiresvarfoo=require('./foo');varbar=require('../lib/bar');// or use modules installed by npm in node_modules/vardomready=require('domready');domready(function(){varelem=document.getElementById('result');elem.textContent=foo(100)+bar('baz');});

Now just use the browserify command to build a bundle starting at entry.js:

$ browserify entry.js -o bundle.js

All of the modules that entry.js needs are included in the final bundle from a recursive walk using detective.

To use the bundle, just toss a <script src="bundle.js"></script> into your html!

usage

Usage: browserify [entry files] {OPTIONS}
Options:
--outfile, -o Write the browserify bundle to this file.
If unspecified, browserify prints to stdout. --require, -r A module name or file to bundle.require()
Optionally use a colon separator to set the target. --entry, -e An entry point of your app --exports Export these core objects, comma-separated list
with any of: require, process. If unspecified, the
export behavior will be inferred.
--ignore, -i Ignore a file --alias, -a Register an alias with a colon separator: "to:from"
Example: --alias 'jquery:jquery-browserify' --cache, -c Turn on caching at $HOME/.config/browserling/cache.json or use
a file for caching.
[default: true]
--debug, -d Switch on debugging mode with //@ sourceURL=...s. [boolean]
--plugin, -p Use a plugin.
Example: --plugin aliasify --prelude Include the code that defines require() in this bundle.
[boolean] [default: true]
--watch, -w Watch for changes. The script will stay open and write updates
to the output every time any of the bundled files change.
This option only works in tandem with -o. --verbose, -v Write out how many bytes were written in -o mode. This is
especially useful with --watch. --help, -h Show this message 

compatibility

Many npm modules that don't do IO will just work after being browserified. Others take more work.

coffee script should pretty much just work. Just do browserify entry.coffee or require('./foo.coffee').

Many node built-in modules have been wrapped to work in the browser. All you need to do is require() them like in node.

  • events
  • path
  • vm
  • http
  • crypto
  • assert
  • url
  • buffer
  • buffer_ieee754
  • util
  • querystring
  • stream

process

Browserify makes available a faux process object to modules with these attributes:

  • nextTick(fn) - uses the postMessage trick for a faster setTimeout(fn, 0) if it can
  • title - set to 'browser' for browser code, 'node' in regular node code
  • browser - true, good for testing if you're in a browser or in node

By default the process object is only available inside of files wrapped by browserify. To expose it, use --exports=process

__dirname

The faux directory name, scrubbed of true directory information so as not to expose your filesystem organization.

__filename

The faux file path, scrubbed of true path information so as not to expose your filesystem organization.

package.json

In order to resolve main files for projects, the package.json "main" field is read.

If a package.json has a "browserify" field, you can override the standard "main" behavior with something special just for browsers.

See dnode's package.json for an example of using the "browserify" field.

more

install

With npm do:

npm install -g browserify

test

To run the node tests with tap, do:

npm test

To run the testling tests, create a browserling account then:

cd testling
./test.sh

About

browser-side require() the node.js way

Resources

Stars

0 stars

Watchers

2 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - ql-io/node-browserify: browser-side require() the node.js way · GitHub
Skip to content

Repository files navigation

browserify

Make node-style require() work in the browser with a server-side build step, as if by magic!

build status

browserify!

example

Just write an entry.js to start with some require()s in it:

// use relative requiresvarfoo=require('./foo');varbar=require('../lib/bar');// or use modules installed by npm in node_modules/vardomready=require('domready');domready(function(){varelem=document.getElementById('result');elem.textContent=foo(100)+bar('baz');});

Now just use the browserify command to build a bundle starting at entry.js:

$ browserify entry.js -o bundle.js

All of the modules that entry.js needs are included in the final bundle from a recursive walk using detective.

To use the bundle, just toss a <script src="bundle.js"></script> into your html!

usage

Usage: browserify [entry files] {OPTIONS}
Options:
--outfile, -o Write the browserify bundle to this file.
If unspecified, browserify prints to stdout. --require, -r A module name or file to bundle.require()
Optionally use a colon separator to set the target. --entry, -e An entry point of your app --exports Export these core objects, comma-separated list
with any of: require, process. If unspecified, the
export behavior will be inferred.
--ignore, -i Ignore a file --alias, -a Register an alias with a colon separator: "to:from"
Example: --alias 'jquery:jquery-browserify' --cache, -c Turn on caching at $HOME/.config/browserling/cache.json or use
a file for caching.
[default: true]
--debug, -d Switch on debugging mode with //@ sourceURL=...s. [boolean]
--plugin, -p Use a plugin.
Example: --plugin aliasify --prelude Include the code that defines require() in this bundle.
[boolean] [default: true]
--watch, -w Watch for changes. The script will stay open and write updates
to the output every time any of the bundled files change.
This option only works in tandem with -o. --verbose, -v Write out how many bytes were written in -o mode. This is
especially useful with --watch. --help, -h Show this message 

compatibility

Many npm modules that don't do IO will just work after being browserified. Others take more work.

coffee script should pretty much just work. Just do browserify entry.coffee or require('./foo.coffee').

Many node built-in modules have been wrapped to work in the browser. All you need to do is require() them like in node.

  • events
  • path
  • vm
  • http
  • crypto
  • assert
  • url
  • buffer
  • buffer_ieee754
  • util
  • querystring
  • stream

process

Browserify makes available a faux process object to modules with these attributes:

  • nextTick(fn) - uses the postMessage trick for a faster setTimeout(fn, 0) if it can
  • title - set to 'browser' for browser code, 'node' in regular node code
  • browser - true, good for testing if you're in a browser or in node

By default the process object is only available inside of files wrapped by browserify. To expose it, use --exports=process

__dirname

The faux directory name, scrubbed of true directory information so as not to expose your filesystem organization.

__filename

The faux file path, scrubbed of true path information so as not to expose your filesystem organization.

package.json

In order to resolve main files for projects, the package.json "main" field is read.

If a package.json has a "browserify" field, you can override the standard "main" behavior with something special just for browsers.

See dnode's package.json for an example of using the "browserify" field.

more

install

With npm do:

npm install -g browserify

test

To run the node tests with tap, do:

npm test

To run the testling tests, create a browserling account then:

cd testling
./test.sh

About

browser-side require() the node.js way

Resources

Stars

0 stars

Watchers

2 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' GitHub - ql-io/node-browserify: browser-side require() the node.js way · GitHub
Skip to content

Repository files navigation

browserify

Make node-style require() work in the browser with a server-side build step, as if by magic!

build status

browserify!

example

Just write an entry.js to start with some require()s in it:

// use relative requiresvarfoo=require('./foo');varbar=require('../lib/bar');// or use modules installed by npm in node_modules/vardomready=require('domready');domready(function(){varelem=document.getElementById('result');elem.textContent=foo(100)+bar('baz');});

Now just use the browserify command to build a bundle starting at entry.js:

$ browserify entry.js -o bundle.js

All of the modules that entry.js needs are included in the final bundle from a recursive walk using detective.

To use the bundle, just toss a <script src="bundle.js"></script> into your html!

usage

Usage: browserify [entry files] {OPTIONS}
Options:
--outfile, -o Write the browserify bundle to this file.
If unspecified, browserify prints to stdout. --require, -r A module name or file to bundle.require()
Optionally use a colon separator to set the target. --entry, -e An entry point of your app --exports Export these core objects, comma-separated list
with any of: require, process. If unspecified, the
export behavior will be inferred.
--ignore, -i Ignore a file --alias, -a Register an alias with a colon separator: "to:from"
Example: --alias 'jquery:jquery-browserify' --cache, -c Turn on caching at $HOME/.config/browserling/cache.json or use
a file for caching.
[default: true]
--debug, -d Switch on debugging mode with //@ sourceURL=...s. [boolean]
--plugin, -p Use a plugin.
Example: --plugin aliasify --prelude Include the code that defines require() in this bundle.
[boolean] [default: true]
--watch, -w Watch for changes. The script will stay open and write updates
to the output every time any of the bundled files change.
This option only works in tandem with -o. --verbose, -v Write out how many bytes were written in -o mode. This is
especially useful with --watch. --help, -h Show this message 

compatibility

Many npm modules that don't do IO will just work after being browserified. Others take more work.

coffee script should pretty much just work. Just do browserify entry.coffee or require('./foo.coffee').

Many node built-in modules have been wrapped to work in the browser. All you need to do is require() them like in node.

  • events
  • path
  • vm
  • http
  • crypto
  • assert
  • url
  • buffer
  • buffer_ieee754
  • util
  • querystring
  • stream

process

Browserify makes available a faux process object to modules with these attributes:

  • nextTick(fn) - uses the postMessage trick for a faster setTimeout(fn, 0) if it can
  • title - set to 'browser' for browser code, 'node' in regular node code
  • browser - true, good for testing if you're in a browser or in node

By default the process object is only available inside of files wrapped by browserify. To expose it, use --exports=process

__dirname

The faux directory name, scrubbed of true directory information so as not to expose your filesystem organization.

__filename

The faux file path, scrubbed of true path information so as not to expose your filesystem organization.

package.json

In order to resolve main files for projects, the package.json "main" field is read.

If a package.json has a "browserify" field, you can override the standard "main" behavior with something special just for browsers.

See dnode's package.json for an example of using the "browserify" field.

more

install

With npm do:

npm install -g browserify

test

To run the node tests with tap, do:

npm test

To run the testling tests, create a browserling account then:

cd testling
./test.sh

About

browser-side require() the node.js way

Resources

Stars

0 stars

Watchers

2 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - ql-io/node-browserify: browser-side require() the node.js way · GitHub
Skip to content

Repository files navigation

browserify

Make node-style require() work in the browser with a server-side build step, as if by magic!

build status

browserify!

example

Just write an entry.js to start with some require()s in it:

// use relative requiresvarfoo=require('./foo');varbar=require('../lib/bar');// or use modules installed by npm in node_modules/vardomready=require('domready');domready(function(){varelem=document.getElementById('result');elem.textContent=foo(100)+bar('baz');});

Now just use the browserify command to build a bundle starting at entry.js:

$ browserify entry.js -o bundle.js

All of the modules that entry.js needs are included in the final bundle from a recursive walk using detective.

To use the bundle, just toss a <script src="bundle.js"></script> into your html!

usage

Usage: browserify [entry files] {OPTIONS}
Options:
--outfile, -o Write the browserify bundle to this file.
If unspecified, browserify prints to stdout. --require, -r A module name or file to bundle.require()
Optionally use a colon separator to set the target. --entry, -e An entry point of your app --exports Export these core objects, comma-separated list
with any of: require, process. If unspecified, the
export behavior will be inferred.
--ignore, -i Ignore a file --alias, -a Register an alias with a colon separator: "to:from"
Example: --alias 'jquery:jquery-browserify' --cache, -c Turn on caching at $HOME/.config/browserling/cache.json or use
a file for caching.
[default: true]
--debug, -d Switch on debugging mode with //@ sourceURL=...s. [boolean]
--plugin, -p Use a plugin.
Example: --plugin aliasify --prelude Include the code that defines require() in this bundle.
[boolean] [default: true]
--watch, -w Watch for changes. The script will stay open and write updates
to the output every time any of the bundled files change.
This option only works in tandem with -o. --verbose, -v Write out how many bytes were written in -o mode. This is
especially useful with --watch. --help, -h Show this message 

compatibility

Many npm modules that don't do IO will just work after being browserified. Others take more work.

coffee script should pretty much just work. Just do browserify entry.coffee or require('./foo.coffee').

Many node built-in modules have been wrapped to work in the browser. All you need to do is require() them like in node.

  • events
  • path
  • vm
  • http
  • crypto
  • assert
  • url
  • buffer
  • buffer_ieee754
  • util
  • querystring
  • stream

process

Browserify makes available a faux process object to modules with these attributes:

  • nextTick(fn) - uses the postMessage trick for a faster setTimeout(fn, 0) if it can
  • title - set to 'browser' for browser code, 'node' in regular node code
  • browser - true, good for testing if you're in a browser or in node

By default the process object is only available inside of files wrapped by browserify. To expose it, use --exports=process

__dirname

The faux directory name, scrubbed of true directory information so as not to expose your filesystem organization.

__filename

The faux file path, scrubbed of true path information so as not to expose your filesystem organization.

package.json

In order to resolve main files for projects, the package.json "main" field is read.

If a package.json has a "browserify" field, you can override the standard "main" behavior with something special just for browsers.

See dnode's package.json for an example of using the "browserify" field.

more

install

With npm do:

npm install -g browserify

test

To run the node tests with tap, do:

npm test

To run the testling tests, create a browserling account then:

cd testling
./test.sh

About

browser-side require() the node.js way

Resources

Stars

0 stars

Watchers

2 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - ql-io/node-browserify: browser-side require() the node.js way · GitHub
Skip to content

Repository files navigation

browserify

Make node-style require() work in the browser with a server-side build step, as if by magic!

build status

browserify!

example

Just write an entry.js to start with some require()s in it:

// use relative requiresvarfoo=require('./foo');varbar=require('../lib/bar');// or use modules installed by npm in node_modules/vardomready=require('domready');domready(function(){varelem=document.getElementById('result');elem.textContent=foo(100)+bar('baz');});

Now just use the browserify command to build a bundle starting at entry.js:

$ browserify entry.js -o bundle.js

All of the modules that entry.js needs are included in the final bundle from a recursive walk using detective.

To use the bundle, just toss a <script src="bundle.js"></script> into your html!

usage

Usage: browserify [entry files] {OPTIONS}
Options:
--outfile, -o Write the browserify bundle to this file.
If unspecified, browserify prints to stdout. --require, -r A module name or file to bundle.require()
Optionally use a colon separator to set the target. --entry, -e An entry point of your app --exports Export these core objects, comma-separated list
with any of: require, process. If unspecified, the
export behavior will be inferred.
--ignore, -i Ignore a file --alias, -a Register an alias with a colon separator: "to:from"
Example: --alias 'jquery:jquery-browserify' --cache, -c Turn on caching at $HOME/.config/browserling/cache.json or use
a file for caching.
[default: true]
--debug, -d Switch on debugging mode with //@ sourceURL=...s. [boolean]
--plugin, -p Use a plugin.
Example: --plugin aliasify --prelude Include the code that defines require() in this bundle.
[boolean] [default: true]
--watch, -w Watch for changes. The script will stay open and write updates
to the output every time any of the bundled files change.
This option only works in tandem with -o. --verbose, -v Write out how many bytes were written in -o mode. This is
especially useful with --watch. --help, -h Show this message 

compatibility

Many npm modules that don't do IO will just work after being browserified. Others take more work.

coffee script should pretty much just work. Just do browserify entry.coffee or require('./foo.coffee').

Many node built-in modules have been wrapped to work in the browser. All you need to do is require() them like in node.

  • events
  • path
  • vm
  • http
  • crypto
  • assert
  • url
  • buffer
  • buffer_ieee754
  • util
  • querystring
  • stream

process

Browserify makes available a faux process object to modules with these attributes:

  • nextTick(fn) - uses the postMessage trick for a faster setTimeout(fn, 0) if it can
  • title - set to 'browser' for browser code, 'node' in regular node code
  • browser - true, good for testing if you're in a browser or in node

By default the process object is only available inside of files wrapped by browserify. To expose it, use --exports=process

__dirname

The faux directory name, scrubbed of true directory information so as not to expose your filesystem organization.

__filename

The faux file path, scrubbed of true path information so as not to expose your filesystem organization.

package.json

In order to resolve main files for projects, the package.json "main" field is read.

If a package.json has a "browserify" field, you can override the standard "main" behavior with something special just for browsers.

See dnode's package.json for an example of using the "browserify" field.

more

install

With npm do:

npm install -g browserify

test

To run the node tests with tap, do:

npm test

To run the testling tests, create a browserling account then:

cd testling
./test.sh

About

browser-side require() the node.js way

Resources

Stars

0 stars

Watchers

2 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); GitHub - ql-io/node-browserify: browser-side require() the node.js way · GitHub
Skip to content

Repository files navigation

browserify

Make node-style require() work in the browser with a server-side build step, as if by magic!

build status

browserify!

example

Just write an entry.js to start with some require()s in it:

// use relative requiresvarfoo=require('./foo');varbar=require('../lib/bar');// or use modules installed by npm in node_modules/vardomready=require('domready');domready(function(){varelem=document.getElementById('result');elem.textContent=foo(100)+bar('baz');});

Now just use the browserify command to build a bundle starting at entry.js:

$ browserify entry.js -o bundle.js

All of the modules that entry.js needs are included in the final bundle from a recursive walk using detective.

To use the bundle, just toss a <script src="bundle.js"></script> into your html!

usage

Usage: browserify [entry files] {OPTIONS}
Options:
--outfile, -o Write the browserify bundle to this file.
If unspecified, browserify prints to stdout. --require, -r A module name or file to bundle.require()
Optionally use a colon separator to set the target. --entry, -e An entry point of your app --exports Export these core objects, comma-separated list
with any of: require, process. If unspecified, the
export behavior will be inferred.
--ignore, -i Ignore a file --alias, -a Register an alias with a colon separator: "to:from"
Example: --alias 'jquery:jquery-browserify' --cache, -c Turn on caching at $HOME/.config/browserling/cache.json or use
a file for caching.
[default: true]
--debug, -d Switch on debugging mode with //@ sourceURL=...s. [boolean]
--plugin, -p Use a plugin.
Example: --plugin aliasify --prelude Include the code that defines require() in this bundle.
[boolean] [default: true]
--watch, -w Watch for changes. The script will stay open and write updates
to the output every time any of the bundled files change.
This option only works in tandem with -o. --verbose, -v Write out how many bytes were written in -o mode. This is
especially useful with --watch. --help, -h Show this message 

compatibility

Many npm modules that don't do IO will just work after being browserified. Others take more work.

coffee script should pretty much just work. Just do browserify entry.coffee or require('./foo.coffee').

Many node built-in modules have been wrapped to work in the browser. All you need to do is require() them like in node.

  • events
  • path
  • vm
  • http
  • crypto
  • assert
  • url
  • buffer
  • buffer_ieee754
  • util
  • querystring
  • stream

process

Browserify makes available a faux process object to modules with these attributes:

  • nextTick(fn) - uses the postMessage trick for a faster setTimeout(fn, 0) if it can
  • title - set to 'browser' for browser code, 'node' in regular node code
  • browser - true, good for testing if you're in a browser or in node

By default the process object is only available inside of files wrapped by browserify. To expose it, use --exports=process

__dirname

The faux directory name, scrubbed of true directory information so as not to expose your filesystem organization.

__filename

The faux file path, scrubbed of true path information so as not to expose your filesystem organization.

package.json

In order to resolve main files for projects, the package.json "main" field is read.

If a package.json has a "browserify" field, you can override the standard "main" behavior with something special just for browsers.

See dnode's package.json for an example of using the "browserify" field.

more

install

With npm do:

npm install -g browserify

test

To run the node tests with tap, do:

npm test

To run the testling tests, create a browserling account then:

cd testling
./test.sh

About

browser-side require() the node.js way

Resources

Stars

0 stars

Watchers

2 watching

Forks

Releases

Packages

Contributors