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 compilegulp.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);})
);
欢迎访问我的博客
antd源码解读 之 构建工具antd-tools相关推荐
- antd 源码解读 notification
Notification 这是一个全局变量的组件,可以在任意地方调用其函数就能够生成一个,我们就来看看这个组件又是用了什么奇巧淫技来实现的. -- 注意:解读的antd的源码版本为 2.13.4 rc ...
- antd源码解读（4）- ButtonGroup
ButtonGroup 这个组件没有重点可以说,毕竟就只是一个将Button组件包裹起来的一个容器,但是这里还是有一个点可以值得一提 // 这里的React.SFC是 typescript 的对于 r ...
- html 源码知识,源码解读
用Node.js写一个web服务器,我前面已经写过两篇文章了: 第一篇是不使用任何框架也能搭建一个web服务器,主要是熟悉Node.js原生API的使用:使用Node.js原生API写一个web服务器 ...
- 从Antd 源码到自我实现之 Form表单
前言 Antd 中的组件大部分基于蚂蚁金服的组件库 react-component.antd 与 react-component 都是开源项目,阅读其源码可以给我们带来很多收益,比如: 了解各式各样的 ...
- antd源码-spin解析
antd源码-spin解析 spin的作用是代表当前块正在加载中 Spin 元素的渲染 renderSpin = ({ getPrefixCls }: ConfigConsumerProps) =&g ...
- 从Antd 源码到自我实现之 Menu 导航菜单
Antd Menu 简述 Menu 为页面和功能提供导航的菜单列表. 导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转.一般分为顶部导航和侧边导航,顶部导航提供全局性的类目和功能,侧边导航提 ...
- Antd源码浅析（二）InputNumber组件 一
前言 上篇我们讲了Icon组件,Icon组件是Antd源码库中实现比较简单的组件,适合大家入门,这篇文章主要和大家一起分析一下数字输入框组件,即InputNumber,难度适中,但蕴含的Antd里较为 ...
- antd源码-Affix固钉解析
antd源码-Affix固钉解析 固钉其实按照我自己的理解就是用固定定位将其定位到某个位置.很简单的一个效果. antd-affix我认为其核心可以概括为几点: 组件加载滚动监听,组件销毁销毁监听. ...
- dva处理_dva 源码解读
声明 本文章用于个人学习研究,并不代表 dva 团队的任何观点. 原文以及包含一定注释的代码见这里,若有问题也可以在这里进行讨论 起步 为什么是dva? 笔者对 dva 的源代码进行解读,主要考虑到 ...
- Feflow 源码解读
Feflow 源码解读 Feflow(Front-end flow)是腾讯IVWEB团队的前端工程化解决方案,致力于改善多类型项目的开发流程中的规范和非业务相关的问题,可以让开发者将绝大部分精力集中在 ...
最新文章
- python一切皆对象的理解_python中为什么万物皆对象
- jQuery选择器整理
- python列表常用方法_第24p，必须掌握，列表的常用方法
- ABP理论学习之Web API控制器（新增）
- 当你的程序在朋友的机器上显示丢失msvcr100d.dll的时候
- VMware下ubuntu全屏显示
- jq 中each的用法 （share）
- 一、TCL事务控制语言 二、MySQL中的约束 三、多表查询（重点） 四、用户的创建和授权 五、MySQL中的索引...
- Docker-学习笔记
- Ghost还原的时候,显示A:GHOSTERR.TXT或CRC32错误的解决方案
- vue学习笔记二：HBuilder X框架搭建
- 基于C语言实现的汽车牌照的快速查询
- 科比最新超酷广告《门徒》
- c语言开发无人机自动驾驶仪,无人机自动驾驶仪.pdf
- 如何正确的对安卓手机进行数据恢复？
- MySql存储IP地址（兼容ipv4和ipv6）
- 读书笔记——事务总结
- 奇异谱分解轴承故障诊断代码编写
- java 在线测评_简单java在线测评程序
- 行业音视频通信市场的技术发展