antd-tools

antd-tools 工具分析

ant-design 通过 npm install 安装后，antd 目录下面有一个 dist 目录，lib 目录和一个 package.json 文件。package.json 中的 main 对应文件 lib/index.js。

antd
|----- dist
+------ antd.js
|------ antd.css
|------ antd.less
|------ antd.min.css
|------ antd.min.js
|------ ......
|----- lib
+------ alert
+------ affix
+------ anchor
+------ card
+------ ......

dist, lib 目录分别使用 npm run dist, npm run compile 生成。而这两个命令最终都是调用的 antd-tools , 因此有必须要先了解下 antd-tools 这个工具。但是 github.com 上关于这个包，只有源代码，因此，我们就从源码的层面分析下它。

antd-tools 源码分析

antd-tools 中的 bin 属性内容如下:

"bin": {
    "antd-tools": "./bin/antd-tools.js",
    "antd-tools-run": "./bin/antd-tools-run.js"
},

antd-tools 对应的文件内容如下:

#!/usr/bin/env node
require('../lib/cli/');

下面看看 lib/cli/index.js 文件的内容:

#!/usr/bin/env node
'use strict';
require('colorful').colorful();
const program = require('commander');
const packageInfo = require('../../package.json');
program
.version(packageInfo.version)
.command('run [name]', 'run specified task')
.parse(process.argv);
// https://github.com/tj/commander.js/pull/260
const proc = program.runningCommand;
if (proc) {
proc.on('close', process.exit.bind(process));
proc.on('error', () => {
process.exit(1);
});
}
const subCmd = program.args[0];
if (!subCmd || subCmd !== 'run') {
program.help();
}

上面代码比较简单，使用tj大神的commander.js工具，关键在于parse方法上。该方法解析argv, 设置options, 如果有定义命令，则调用它。

对于 antd 的 npm run dist 命令和 npm run compile命 令来说，就是 antd-tools run dist, antd-tools run compile。最终执行子命令 antd-tools/bin/antd-tools-run.js。
真正的子命令代码位于 antd-tools/lib/cli/run.js。

#!/usr/bin/env node
'use strict';
require('colorful').colorful();
const gulp = require('gulp');
const program = require('commander');
program.on('--help', () => {
console.log('  Usage:'.to.bold.blue.color);
console.log();
});
program.parse(process.argv);
const task = program.args[0];
if (!task) {
program.help();
} else {
console.log('antd-tools run', task);
require('../gulpfile');
gulp.start(task);
}
// 这里就是调用该脚本，task分别为dist, compile。

npm run dist 分析

该命令就是调用 atool-build 构建 antd 源码。 将源码构建到dist目录。

gulp.task('dist', (done) => {
    dist(done);
});
function dist(done) {
execSync('rimraf dist');
process.env.RUN_ENV = 'PRODUCTION';
runCmd('atool-build', ['--devtool=#sourcemap'], (code) => {
done(code);
});

npm run compile 分析

将源码转换为 ES5 到 lib 文件夹中。JS源码是 TypeScript 实现的, css 使用 less 实现。
除了样式、js外，还有 svg, png 之类的。

除了npm run compile, 还有 npm run pub 用于发布编译后的代码的。

了解到这个层面，基本上可以对 antd源码中的组件进行分析和改装了。

antd 中组件位于 components 目录， 而相关的 typescript 定义相关的东西放在 typings 里边。

参考连接
http://ant-tool.github.io/atool-build.html
https://github.com/liangklfangl/atool-build-source