Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
browser-pack
Advanced tools
pack node-style source files from a json stream into a browser bundle
The browser-pack npm package is a tool used to bundle JavaScript files for use in the browser. It takes a stream of CommonJS modules and produces a single JavaScript file that can be included in a web page. This is particularly useful for front-end development where modular code needs to be combined into a single script.
Bundling JavaScript Modules
This feature allows you to bundle multiple JavaScript modules into a single file. The code sample demonstrates how to use browser-pack to read a JSON file containing module definitions, bundle them, and write the output to a new file.
const pack = require('browser-pack');
const fs = require('fs');
const JSONStream = require('JSONStream');
const p = pack();
const input = fs.createReadStream('modules.json');
const output = fs.createWriteStream('bundle.js');
input.pipe(JSONStream.parse('*')).pipe(p).pipe(output);
Customizing Bundle Output
This feature allows you to customize the output of the bundle. The code sample shows how to use options like 'raw' and 'hasExports' to modify the behavior of the bundling process.
const pack = require('browser-pack');
const fs = require('fs');
const JSONStream = require('JSONStream');
const p = pack({ raw: true, hasExports: true });
const input = fs.createReadStream('modules.json');
const output = fs.createWriteStream('custom-bundle.js');
input.pipe(JSONStream.parse('*')).pipe(p).pipe(output);
Browserify is a popular tool that also allows you to bundle JavaScript files for use in the browser. It provides a more comprehensive solution with a larger ecosystem of plugins and transforms. Compared to browser-pack, Browserify offers more features out of the box, such as support for various module formats and built-in source map generation.
Webpack is a powerful module bundler that can handle not just JavaScript but also CSS, images, and other assets. It offers advanced features like code splitting, hot module replacement, and tree shaking. While browser-pack focuses on bundling JavaScript modules, Webpack provides a more extensive and flexible solution for modern web development.
Rollup is a module bundler that specializes in optimizing ES6 modules. It produces smaller and more efficient bundles by leveraging tree shaking to remove unused code. Rollup is often preferred for library development due to its focus on ES6 modules and its ability to generate multiple output formats. Compared to browser-pack, Rollup offers more advanced optimizations and support for ES6 modules.
pack node-style source files from a json stream into a browser bundle
json input:
[
{
"id": "a1b5af78",
"source": "console.log(require('./foo')(5))",
"deps": { "./foo": "b8f69fa5" },
"entry": true
},
{
"id": "b8f69fa5",
"source": "module.exports = function (n) { return n * 111 }",
"deps": {}
}
]
bundle script:
var pack = require('browser-pack')();
process.stdin.pipe(pack).pipe(process.stdout);
process.stdin.resume();
output:
$ browser-pack < input.json
(function(p,c,e){function r(n){if(!c[n]){c[n]={exports:{}};p[n][0](function(x){return r(p[n][1][x])},c[n],c[n].exports);}return c[n].exports}for(var i=0;i<e.length;i++)r(e[i]);return r})({"a1b5af78":[function(require,module,exports){console.log(require('./foo')(5))},{"./foo":"b8f69fa5"}],"b8f69fa5":[function(require,module,exports){module.exports = function (n) { return n * 111 }},{}]},{},["a1b5af78","b8f69fa5"])
var pack = require('browser-pack');
Return a through stream that takes a stream of json input and produces a stream
of javascript output. This module does not export its internal require()
function but you can prepend 'var require='
to the stream contents to get the
require function. require()
will return undefined
when a module hasn't been
defined to support splitting up modules across several bundles with custom
fallback logic.
If opts.raw
is given, the writable end of the stream will expect objects to be
written to it instead of expecting a stream of json text it will need to parse.
If opts.sourceMapPrefix
is given and source maps are computed, the
opts.sourceMapPrefix
string will be used instead of //#
.
If opts.sourceRoot
is given and source maps are computed, the root for the
output source map will be defined. (default is no root)
Additionally, rows with a truthy entry
may have an order
field that
determines the numeric index to execute the entries in.
You can specify a custom prelude with opts.prelude
but you should really know
what you're doing first. See the prelude.js
file in this repo for the default
prelude. If you specify a custom prelude, you must also specify a valid
opts.preludePath
to the prelude source file for sourcemaps to work.
opts.standalone
external string name to use for umd
opts.standaloneModule
sets the internal module name to export for standalone
opts.hasExports
whether the bundle should include require=
(or the
opts.externalRequireName
) so that require()
is available outside the bundle
With npm, to get the library do:
npm install browser-pack
and to get the command-line tool do:
npm install -g browser-pack
MIT
FAQs
pack node-style source files from a json stream into a browser bundle
The npm package browser-pack receives a total of 685,209 weekly downloads. As such, browser-pack popularity was classified as popular.
We found that browser-pack demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 39 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.