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);
  })
);

歡迎訪問我的博客