apack-build

apack-build

基于 apack 的更快的打包构建工具, 支持 .js, .jsx, .less, .css, .json 文件的处理.

为什么要有 apack ?

你可能已经发现了，我们现在的构建工具真的有点慢，时不是要带薪编译（然后加班补债）。因此，apack 应运而生，它的目标就是让构建速度快起来。

什么是 apack ?

apack 是在 webpack 的思想上使用多进程并行运算和磁盘深度缓存策略架构和开发的前端构建工具。相比于 webpack 而言，其性能优势体现在，速度提升 50% ~ 97%（数据基于多个实际的中台业务项目）。具体而言，在不开启磁盘缓存的情况下，apack 构建速度比 webpack 快 50% ~ 70%；开启磁盘缓存后，apack 平均构建速度在毫秒级，比 webpack 快一个数量级。使用 apack 后，再也不会启动 tnpm run dev 后就不敢关掉了，就算重启电脑，构建也是瞬时完成。

apack 还在成长阶段，难免不稳定或功能不够强大，期待你反馈或共建！

安装

$ tnpm install -g @alipay/apack-build

使用

$ apack-build  # 在项目根目录执行

需要注意, package.json 中请配置项目的入口 entry. 比如:

"entry": {
  "index": "./src/entry/index.jsx"
}

如果你的项目有依赖外部库(比如 jQuery), 需要在 package.json 中添加 externals. 比如:

"externals": {
  "jquery": "jQuery",
  "react": "React"
}

Dev-Server

$ apack-server  # 在项目根目录执行

启动一个本地开发服务器.

Options

apack-build 和 apack-server 共有配置

• --disable-cache 是否禁用缓存
• -e, --entry 选择指定的 entry 进行构建. 当 package.json 里面定义的 entry 有多个入口时, 该参数可以只构建关心的 entry, 节省时间. 多个 entry 用逗号隔开.
• --babel-include 构建时需要用 babel 编译的目录, 默认为 null, 也就是忽略该参数, 所有文件全部编译. 多个目录用逗号隔开.
• --babel-exclude 构建时不需要用 babel 编译的目录, 默认为 node_modules, 也就是忽略 node_modules 目录下的所有文件. 如果指定为 null, 代表忽略该参数, 不忽略任何文件. 多个目录用逗号隔开.
• --no-color 输出日志不带颜色
• --url-limit 需要通过 base64 转成 data-uri 的图片文件大小上限

apack-build

• -o, --output-path 构建文件输出目录
• --compress 是否压缩代码, 默认为 false
• --watch 是否监控文件变化, 默认为 false
• --hash 输出构建文件的 hash, 并保存到 ./dist/map.json 文件中.
• --disable-source-map 是否禁用生成 sourcemap, 默认为 false, 也就是会产生 sourcemap. 当 compress 为 true 时, 该配置项强制为 true.

apack-server

• -p, --port 端口, 默认为 8000
• --public-path 需要 serve 的静态文件目录, 比如 index.html 文件所在目录, 默认为当前项目根目录

高级

apack-build 是对 apack 的封装. 直接使用 apack 可以获得更强大的功能, 比如处理更多类型的文件. 请参考此处