antd源码解读 之 构建工具antd-tools

antd-tools 作为antd源码中一个重要的构建工具存在 文档相对不是很完善
我们来研究下他的源码一探究竟

antd 的 package.json 中的scripts（一）

prepublish

"prepublish": "antd-tools run guard"

这调命令涉及到了npm scripts 中的 hook prepublish是 publish 这条命令的 hook
意为在publish之前执行 antd-tools run guard

问题：antd-tools run guard 干了啥 ？

我们看 antd-tools的源码整个工具的流程图示意如下

所以找到最终执行的文件lib/gulpfile.js
也就明白了

"prepublish": "antd-tools run guard"

是为了屏蔽掉 npm publish 的方式发包 （ 因为 prepuhlish 在包目录下执行npm install时也会执行）直接运行 npm publish 的话抛出错误。
以下是代码

gulp.task(
  'guard',
  gulp.series(done => {
    // 获取 npm 参数 ;
    const npmArgs = getNpmArgs();

    if (npmArgs) {
      for (let arg = npmArgs.shift(); arg; arg = npmArgs.shift()) {
        if (/^pu(b(l(i(sh?)?)?)?)?$/.test(arg) && npmArgs.indexOf('--with-antd-tools') < 0) {
          reportError();
          done(1);
          return;
        }
      }
    }
    done();
  })
);

antd 的 package.json 中的scripts（二）

pub

	"pub": "antd-tools run pub"

最终执行的是lib/gulpfile.js

gulp.task(
  'pub',
 //gulp.series 串行执行 check-git compile
  gulp.series('check-git', 'compile', done => {
    pub(done);
  })
);

check-git:发包之前 检查git的状态 和有无没有没有提交的内容

antd 的 package.json 中的scripts（三）

compile

	"compile": "antd-tools run compile"

compile:编译源码

//gulp.parallel 并发执行
gulp.task('compile', gulp.parallel('compile-with-es', 'compile-with-lib'));

compile-with-es和compile-with-lib分别生成遵循es6 模块化规范的代码和commonjs 规范的代码

gulp.task('compile-with-es', done => {
  console.log('[Parallel] Compile to es...');
  compile(false).on('finish', done);
});

gulp.task('compile-with-lib', done => {
  console.log('[Parallel] Compile to js...');
  compile().on('finish', done);
});

上述代码可以看出他们都是执行了compile 方法 传了不同的参数而已，compile函数干了以下这么几件事情

1. 编译less 文件输出一份拷贝的less 和css 文件
2. 处理静态资源文件
3. 处理ts文件
4. 用babel解析js文件流

2 中有一个有趣的postcss 插件 rucksack-css让css写起来更方便(用时间换体验)

4 中有一个实用的gulp 插件 gulp-strip-code指定编译后删的部分

antd 的 package.json 中的scripts（四）

predeploy 中的 clean

"predeploy": "antd-tools run clean",

清除_site 和 _data 文件夹

antd 的 package.json 中的scripts（五）

dist

"dist": "antd-tools run dist"

用 webpack 打包 components 目录下的文件产出到dist目录
webpack 配置= 初始化配置（构建工具中）+ 对外开放的接口(项目目录中的webpack.config.js)

antd 的 package.json 中的scripts（六）

ts-lint

 "lint:ts": "npm run tsc && antd-tools run ts-lint",

下面是lint 执行的代码 ，这里所做的就是把ts-lint的依赖和tslint的配置文件 丢在构建工具中 用node去执行tslint 的主文件并把参数传进去

gulp.task(
  'ts-lint',
  gulp.series(done => {
    const tslintBin = require.resolve('tslint/bin/tslint');
    const tslintConfig = path.join(__dirname, './tslint.json');
    const args = [tslintBin, '-c', tslintConfig, 'components/**/*.tsx'];
    runCmd('node', args, done);
  })
);