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函數幹了以下這麼幾件事情
- 編譯less 文件輸出一份拷貝的less 和css 文件
- 處理靜態資源文件
- 處理ts文件
- 用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);
})
);