Pax

Pax是银河系中最快的JavaScript打包器。完全支持ECMAScript模块语法（import/export），此外还支持CommonJS require(<string>)。

• 我为什么需要它？
• 我如何获取它？
• 我如何使用它？
• 它支持源映射吗？
• 模块？
• 有哪些选项？
• 它快吗？

我为什么需要它？

因为你的打包器太慢了。

你肯定有这种感觉。你做出调整，按下 ⌘S ⌘Tab ⌘R，然后… 没有任何变化。你得到的是旧版本。你打败了打包器。你等待几秒钟，再次按下 ⌘R，你的更改终于显示出来。但已经太晚了——你已经失去了势头。 它的颜色不对。你把“菜单”拼错了。错误仍然有时发生。

重做。重复。十轮后，事情看起来不错。是时候 git commit 了。但你花费的时间比工作的时间多。这是打包器的错。

Pax是一个打包器。但你永远也赶不上它。为什么？

• 它是并行化的。它充分利用了你的核心。
• 它是最小的。它没有被你不需要的特性拖累。
• 它对JavaScript的了解正好足够处理依赖关系解析。它甚至不费力气解析你的大部分源代码。

不要浪费时间等待打包器完成它的任务。在开发时使用Pax，随心所欲地迭代。在发布时使用你那超级酷、神奇、慢如泥浆的打包器，那时你不在乎它运行多长时间。

我如何获取它？

> cargo install pax

如果你没有 cargo，请使用 https://rustup.rs 安装。

我如何使用它？

// index.js:
const itt = require('itt')
const math = require('./math')
console.log(itt.range(10).map(math.square).join(' '))

// math.js:
exports.square = x => x * x

> px index.js bundle.js

只需在 <script src=bundle.js> 上贴上，就可以出发了。每当您更改文件时，通过传递 -w 来重建。

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

它支持源映射吗？

当然！

# bundle.js and bundle.js.map
> px index.js bundle.js

# bundle.js with inline map
> px --map-inline index.js bundle.js

# bundle.js with no source map
> px index.js >bundle.js
# or
> px --no-map index.js bundle.js

模块？

这在技术上不是一个问题。但是是的。

// index.mjs
import itt from 'itt'
import { square, cube } from './math'

console.log(itt.range(10).map(square).join(' '))
console.log(itt.range(10).map(cube).join(' '))

// math.mjs
export const square = x => x * x, cube = x => x * x * x

> px -e index.mjs bundle.js

如果您需要将模块放在 .js 文件中，出于某种原因，请使用 -E (--es-syntax-everywhere) 而不是 -e (--es-syntax)。

有哪些选项？

> px --help
pax v0.4.0

Usage:
    px [options] <input> [output]
    px [-h | --help]

Options:
    -i, --input <input>
        Use <input> as the main module.

    -o, --output <output>
        Write bundle to <output> and source map to <output>.map.
        Default: '-' for stdout.

    -m, --map <map>
        Output source map to <map>.

    -I, --map-inline
        Output source map inline as data: URI.

    -M, --no-map
        Suppress source map output when it would normally be implied.

    -w, --watch
        Watch for changes to <input> and its dependencies.

    -W, --quiet-watch
        Don't emit a bell character for errors that occur while watching.
        Implies --watch.

    -e, --es-syntax
        Support .mjs files with ECMAScript module syntax:

            import itt from 'itt'
            export const greeting = 'Hello, world!'

        Instead of CommonJS require syntax:

            const itt = require('itt')
            exports.greeting = 'Hello, world!'

        .mjs (ESM) files can import .js (CJS) files, in which case the
        namespace object has a single `default` binding which reflects the
        value of `module.exports`. CJS files can require ESM files, in which
        case the resultant object is the namespace object.

    -E, --es-syntax-everywhere
        Implies --es-syntax. Allow ECMAScript module syntax in .js files.
        CJS-style `require()` calls are also allowed.

    -x, --external <module1,module2,...>
        Don't resolve or include modules named <module1>, <module2>, etc.;
        leave them as require('<module>') references in the bundle. Specifying
        a path instead of a module name does nothing.

    --external-core
        Ignore references to node.js core modules like 'events' and leave them
        as require('<module>') references in the bundle.

    -h, --help
        Print this message.

    -v, --version
        Print version information.

它快吗？

嗯...

是的。

> time browserify index.js >browserify.js
real    0m0.225s
user    0m0.197s
sys     0m0.031s
> time node fuse-box.js
real    0m0.373s
user    0m0.324s
sys     0m0.051s
> time px index.js >bundle.js
real    0m0.010s
user    0m0.005s
sys     0m0.006s

# on a larger project
> time browserify src/main.js >browserify.js
real    0m2.385s
user    0m2.459s
sys     0m0.416s
> time px src/main.js >bundle.js
real    0m0.037s
user    0m0.071s
sys     0m0.019s

# want source maps?
> time browserify -d src/main.js -o bundle.js
real    0m3.142s
user    0m3.060s
sys     0m0.483s
> time px src/main.js bundle.js
real    0m0.046s
user    0m0.077s
sys     0m0.026s

# realtime!
> px -w examples/simple bundle.js
 ready bundle.js in 2 ms
update bundle.js in 2 ms
update bundle.js in 2 ms
update bundle.js in 1 ms
update bundle.js in 2 ms
update bundle.js in 1 ms
update bundle.js in 3 ms
^C