snootforge

chee/oax

A fork of pax.js.org for Origami

Pax

The fastest JavaScript bundler in the galaxy. Fully supports ECMAScript module syntax (import/export) in addition to CommonJS require(<string>).

Why do I need it?

Because your bundler is too slow.

You know the feeling. You make that tweak, hit ⌘S ⌘Tab ⌘R, and… nothing changes. You get the old version. You beat the bundler. You wait a few seconds, hit ⌘R again, and your changes finally show up. But it’s too late—you’ve lost momentum. It’s the wrong shade of pink. You spelled “menu” with a z. The bug still happens sometimes.

Rinse. Repeat. Ten cycles later, things are looking good. It’s time to git commit. But you spent more time waiting than working. And it’s your bundler’s fault.

Pax is a bundler. But you’ll never beat it. Why?

Don’t waste time waiting for your bundler to do its thing. Use Pax while you’re developing, and iterate to your heart’s content. Use your super-cool, magical, slow-as-molasses bundler for releases, when you don’t care how long it takes to run.

How do I get it?

  1. > cargo install pax

If you don’t have cargo, install it with https://rustup.rs.

How do I use it?

  1. // index.js:
  2. const itt = require('itt')
  3. const math = require('./math')
  4. console.log(itt.range(10).map(math.square).join(' '))
  5. // math.js:
  6. exports.square = x => x * x
  1. > px index.js bundle.js

Slap on a <script src=bundle.js>, and you’re ready to go. Pass -w to rebuild whenever you change a file.

  1. > px -w index.js bundle.js
  2. ready bundle.js in 1 ms
  3. update bundle.js in 1 ms
  4. ...

Does it do source maps?

Of course!

  1. # bundle.js and bundle.js.map
  2. > px index.js bundle.js
  3. # bundle.js with inline map
  4. > px --map-inline index.js bundle.js
  5. # bundle.js with no source map
  6. > px index.js >bundle.js
  7. # or
  8. > px --no-map index.js bundle.js

Modules?

That’s technically not a question. But yes.

  1. // index.mjs
  2. import itt from 'itt'
  3. import { square, cube } from './math'
  4. console.log(itt.range(10).map(square).join(' '))
  5. console.log(itt.range(10).map(cube).join(' '))
  6. // math.mjs
  7. export const square = x => x * x, cube = x => x * x * x
  1. > px -e index.mjs bundle.js

If you need your modules to be in .js files for some reason, use -E (--es-syntax-everywhere) instead of -e (--es-syntax).

What are the options?

  1. > px --help
  2. pax v0.4.0
  3. Usage:
  4. px [options] <input> [output]
  5. px [-h | --help]
  6. Options:
  7. -i, --input <input>
  8. Use <input> as the main module.
  9. -o, --output <output>
  10. Write bundle to <output> and source map to <output>.map.
  11. Default: '-' for stdout.
  12. -m, --map <map>
  13. Output source map to <map>.
  14. -I, --map-inline
  15. Output source map inline as data: URI.
  16. -M, --no-map
  17. Suppress source map output when it would normally be implied.
  18. -w, --watch
  19. Watch for changes to <input> and its dependencies.
  20. -W, --quiet-watch
  21. Don't emit a bell character for errors that occur while watching.
  22. Implies --watch.
  23. -e, --es-syntax
  24. Support .mjs files with ECMAScript module syntax:
  25. import itt from 'itt'
  26. export const greeting = 'Hello, world!'
  27. Instead of CommonJS require syntax:
  28. const itt = require('itt')
  29. exports.greeting = 'Hello, world!'
  30. .mjs (ESM) files can import .js (CJS) files, in which case the
  31. namespace object has a single `default` binding which reflects the
  32. value of `module.exports`. CJS files can require ESM files, in which
  33. case the resultant object is the namespace object.
  34. -E, --es-syntax-everywhere
  35. Implies --es-syntax. Allow ECMAScript module syntax in .js files.
  36. CJS-style `require()` calls are also allowed.
  37. -x, --external <module1,module2,...>
  38. Don't resolve or include modules named <module1>, <module2>, etc.;
  39. leave them as require('<module>') references in the bundle. Specifying
  40. a path instead of a module name does nothing.
  41. --external-core
  42. Ignore references to node.js core modules like 'events' and leave them
  43. as require('<module>') references in the bundle.
  44. -h, --help
  45. Print this message.
  46. -v, --version
  47. Print version information.

Is it fast?

Umm…

Yes.

  1. > time browserify index.js >browserify.js
  2. real 0m0.225s
  3. user 0m0.197s
  4. sys 0m0.031s
  5. > time node fuse-box.js
  6. real 0m0.373s
  7. user 0m0.324s
  8. sys 0m0.051s
  9. > time px index.js >bundle.js
  10. real 0m0.010s
  11. user 0m0.005s
  12. sys 0m0.006s
  13. # on a larger project
  14. > time browserify src/main.js >browserify.js
  15. real 0m2.385s
  16. user 0m2.459s
  17. sys 0m0.416s
  18. > time px src/main.js >bundle.js
  19. real 0m0.037s
  20. user 0m0.071s
  21. sys 0m0.019s
  22. # want source maps?
  23. > time browserify -d src/main.js -o bundle.js
  24. real 0m3.142s
  25. user 0m3.060s
  26. sys 0m0.483s
  27. > time px src/main.js bundle.js
  28. real 0m0.046s
  29. user 0m0.077s
  30. sys 0m0.026s
  31. # realtime!
  32. > px -w examples/simple bundle.js
  33. ready bundle.js in 2 ms
  34. update bundle.js in 2 ms
  35. update bundle.js in 2 ms
  36. update bundle.js in 1 ms
  37. update bundle.js in 2 ms
  38. update bundle.js in 1 ms
  39. update bundle.js in 3 ms
  40. ^C