unbundle
import/export & node_modules in the browser, without the bundling
Last updated 6 months ago by seb .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install unbundle 
SYNC missed versions from official npm registry.

Unbundle ????

Unbundle traces JavaScript dependencies, from your code or node_modules. It carefully rewires their static import/export or dynamic import() paths to explicit file paths. The output files are ready to be consumed by any modern browser. This lets you use ECMAScript modules (ESM) and NPM packages, the stuff from node_modules, in the web browser without bundling everything into a single file. Or use process the generated files further using other tools for minification, revving, bundling, auditing, etc.

Example

$ unbundle --entry app.js --destination dist

Where app.js is a source code entry file and dist is a to-be-created output directory.

Input: app.js uses unresolved paths and named imports

import widget from './widget'
import moment from 'moment'
const foobar = import('./foobar')
// ...

Output: dist/app.js has its import paths resolved

import widget from './widget.js'
import lodash from '/node_modules/moment/src/moment.js'
const foobar = import('./foobar.mjs')
// ...

All sub-dependencies are recursively traced and written to the output directory in the correct location. Named dependencies, i.e. packages from NPM, are moved to a '/node_modules` sub-directory. Any NPM package that publishes ECMAScript modules (ESM) should work. See below for compatibility testing.

The resulting output directory looks like:

  • dist/
    • app.js
    • widget.js
    • foobar.mjs
    • node_modules/moment/src/
      • moment.js
      • lib/moment/moment.js
      • lib/moment/calendar.js
      • lib/locale/locale.js
      • lib/duration/duration.js
      • lib/units/units.js
      • lib/utils/is-date.js
      • ...

Any external source maps are also copied to the destination directory. They are only downloaded when the browser development tools are opened, so no performance penalty.

Why?

To make NPM packages (i.e. node_modules) work on the web with the least amount of effort.

Tools like Browserify, Webpack, and Rollup exist to transpile various languages and module formats into a single, concatenated bundle. Depending on the use-case, configuring these tools and optimising their output requires significant effort and expertise.

Unbundle is a tiny tool. About 50 significant lines of code (SLoC). Standalone it is useful; composed with others it is powerful. That is the Unix philosophy of minimalist, modular, reusable tools.

Unbundle is designed for, but not limited to, delivering web apps with protocols like HTTP/2 Server Push. Other tools can be used to provide file revving for cache busting, code minification, AMD/UMD/CommonJS to ES2015 module conversion, Flow/TypeScript language transpilation, and more.

Earlier, defunct versions of Unbundle, anno 2016, did too much at once: support for JSX and Flow, injecting service workers with Cache Digest and Cache-Control: immutable, file watching, multi-CPU cluster support, CLI progress reporting, file revving for cache busting, code minification, source maps, and more. That caused it to be good at exactly one workflow and wrong, to varying degrees, for almost everything else.

CLI

unbundle [options]

Options

-i, --entry <file>

  • Required: Yes
  • Type: String

File path of source code entry point.

-o, --destination <directory>

  • Required: Yes
  • Type: String

Directory path to write output.

--root

  • Default: "/"

Prefix for import paths

-f, --force

  • Default: false

Overwrite existing files.

-r, --recurse

  • Default: true

Recursively trace all files.

--verbose

  • Default: false

Show more information during file processing.

--version

Show version number

--help

Show version number

Examples

Trace all dependencies of src/app.js and output to dist directory.

unbundle --entry ./src/app.js --destination ./dist

Prefix imports of NPM packages with: /assets/scripts/node_modules/

unbundle --entry index.js --destination public/assets/scripts --root /assets/scripts/

Compatibility

Package Status Notes
angular Maybe?
choreographer-router
d3
graphql graphql/graphql-js#1819
lit-element
lit-html
lodash-es
moment
popper.js
preact
ramda
react facebook/react#11503
rxjs ReactiveX/rxjs#4416
vue
whatwg-fetch

Anything that exports a standard ECMAScript module should work just fine. Please report any issues with the name and version of the problematic package.

See Also

Current Tags

  • 8.4.3                                ...           latest (6 months ago)

26 Versions

  • 8.4.3                                ...           6 months ago
  • 8.4.2                                ...           7 months ago
  • 8.4.1                                ...           8 months ago
  • 8.4.0                                ...           8 months ago
  • 8.3.0                                ...           8 months ago
  • 8.2.0                                ...           8 months ago
  • 8.1.0                                ...           8 months ago
  • 8.0.1                                ...           8 months ago
  • 8.0.0                                ...           8 months ago
  • 7.1.0                                ...           3 years ago
  • 7.0.8                                ...           3 years ago
  • 7.0.7                                ...           3 years ago
  • 7.0.6                                ...           3 years ago
  • 7.0.5                                ...           3 years ago
  • 7.0.4                                ...           3 years ago
  • 7.0.3                                ...           3 years ago
  • 7.0.2                                ...           3 years ago
  • 7.0.1                                ...           3 years ago
  • 7.0.0                                ...           3 years ago
  • 6.1.1                                ...           3 years ago
  • 6.1.0                                ...           3 years ago
  • 5.0.0                                ...           3 years ago
  • 4.0.0                                ...           3 years ago
  • 3.0.0                                ...           3 years ago
  • 2.0.0                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 3
Last Month 32
Dependencies (5)
Dev Dependencies (10)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |