快速上手

概述

本节以 antd-init 脚手架为例,介绍如何快速上手 atool。他适用于简单的 react 项目,非 react 项目请参考此 boilerplate 里的配置自行搭建。

atool 依赖了 babel 6,而 babel6 在 npm2 下会有严重的性能问题1,所以请确保 npm 版本是 3 。

$ npm -v
3.3.12

安装

首先,请全局安装 antd-init

$ npm i antd-init -g
...
$ antd-init -v
0.6.2

创建项目

然后创建一个空目录,并在里面执行 antd-init

$ mkdir blog && cd blog
$ antd-init

用法

package.json

package.json 中只有唯一一个约定 entry,用于指定入口文件。这里的 entry 即 webpack 的 entry,在构建和调试时会完整地传递给 webpack 。

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

更多配置方法请参考 webpack 文档

调试

在项目目录执行 npm start

$ npm start

> antd-demo@1.0.0 dev /private/tmp/blog
> dora -p 8001 --plugins atool-build,proxy,hmr

          proxy: listened on 8989
📦  310/310 build modules
webpack: bundle build is now finished.

然后,在浏览器中打开 http://localhost:8989/ 即可看到页面。

这里的调试基于 dora 实现,并内置了以下插件:

构建

理论上,本地只需通过 npm start 进行调试即可,无需构建。而实际上,你可能需要观察构建出来的文件是否符合预期。

在项目根目录执行。

$ npm run build

> antd-demo@1.0.0 build /private/tmp/blog
> atool-build -o ./dist/${npm_package_family}/${npm_package_name/{npm_package_version}

Hash: c09527a012dedc0b76a4
Version: webpack 1.12.11
Time: 22550ms
    Asset       Size  Chunks             Chunk Names
common.js  728 bytes       0  [emitted]  common
 index.js     263 kB    1, 0  [emitted]  index
index.css     221 kB    1, 0  [emitted]  index
chunk    {0} common.js (common) 0 bytes [rendered]
chunk    {1} index.js, index.css (index) 942 kB {0} [rendered]

然后在dist目录可以找到构建出来的文件。

1. babel 6 在 npm2 下会下载大量的重复依赖,这些依赖在编译阶段会被重复地载入,而 npm3 的去重机制可以很好地解决这个问题,所以性能上提升很大。性能比较数据