「 星系最快的 JavaScript 捆绑器 」
| 翻译的原文 | 与日期 | 最新更新 | 更多 |
|---|---|---|---|
| commit | ⏰ 2018-09-01 |  |
中文翻译 |
欢迎 👏 勘误/校对/更新贡献 😊 具体贡献请看
If help, buy me coffee —— 营养跟不上了，给我来瓶营养快线吧! 💰
星系最快的 JavaScript 捆绑器。完全支持 ECMAScript 模块语法(import/export)，除了 CommonJS 语法 require(<string>)。
因为您的捆绑器是太慢了.
你知道这种感觉。你做了那个调整，点击⌘S ⌘Tab ⌘R,...没有什么变化.你得到旧版本。你让捆绑器挂了次。你等了几秒钟,再次⌘R，变化终于出现了。但为时已晚 -你失去了行动力.。那下一次可能会是个粉红色错误。因你用一个 z 拼写了 "menu"，而这些错误总在不经意间发生。
撤消，恢复，十个来回之后，事情看起来很好啦。现在是git commit的时候了，但是你等待的时间，比花在工作上，要多得多。这是你的捆绑器的错.
Pax 是一个捆绑器。但你永远不能打败它。为什么?
- 它是并行化的。它充分利用了您的 CPU。
- 这是最小的。它不会因您不需要的功能，而陷入困境。
- 它完全了解 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 和 bundle.js.map
> px index.js bundle.js
# bundle.js 内联地图
> px --map-inline index.js bundle.js
# bundle.js 没有地图
> px index.js >bundle.js
# 或
> 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>
<input> 作为主模块.
-o, --output <output>
将 捆绑 <output> 和 source map 输出到 <output>.map.
默认: '-' 为 stdout.
-m, --map <map>
输出 source map 到 <map>.
-I, --map-inline
输出 内联 source map , 用作: URI数据.
-M, --no-map
抑制 source map 输出，当为正常情况下.
-w, --watch
观察 <input> 和 它的 依赖.
-W, --quiet-watch
静静地看，就好了.
覆盖 --watch.
-e, --es-syntax
支持ECMAScript 模块语法的 .mjs 文件:
import itt from 'itt'
export const greeting = 'Hello, world!'
替代 CommonJS 的 require 语法:
const itt = require('itt')
exports.greeting = 'Hello, world!'
.mjs (ESM) 文件 可以 import .js (CJS) 文件, 在这种情况下，命名空间对象有个`default`绑定，它反映了`module.exports`的值. CJS 文件 可以 require ESM 文件, 在这种情况下，结果对象是命名空间对象.
-E, --es-syntax-everywhere
覆盖 --es-syntax。 .js 文件 允许 ECMAScript 模块语法.
CJS-格式 `require()` 也被允许调用。
-x, --external <module1,module2,...>
不要解析或包含名为 <module1>, <module2>, etc. 的模块;
让他们在捆绑中作为 require('<module>') 引用. 指定一个路径，以替代 不做事的模块名。
--external-core
忽略 node.js的内置模块，像'events'之类的引用 和 让他们在捆绑中作为 require('<module>') 引用.
-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