一 React整体目录分析

https://github.com/facebook/react git clone 源代码到本地,打开看到如下目录:

源代码在src下,阅读源码主要读src目录下的代码即可。在此之前,先简单解析下其他的目录。

package.json

从这里看项目的依赖以及脚本命令:

运行

npm install

安装好依赖。

开发构建相关的命令在scripts中(里面定义的命令会用到scripts目录下的配置文件),react采用jest进行测试,配置在jest下。

这里的命令作用:

npm run bench npm run build :项目构建 npm run lint :代码校验. npm test :使用jest进行整体测试(测试脚本定义在jest下) npm test :测试某类文件 npm run flow :使用flow进行类型检查 npm run prettier: 使用prettier进行代码格式化

scripts目录

scripts目录定义了项目开发构建等命令脚本的配置:

build目录

完成react源代码编写与测试后,执行:

npm run build

会生产react相关的文件:

注意!这里构建生产的文件(build/packages下的文件)就是我们在开发react项目中通过npm install react npm install react-dom 等命令安装在node_modules 下的源文件。

CHANGELOG.md 更新日志

从这里可以了解到React各个历史版本的重要更新点,是了解React版本迭代与技术演进的一个途径。

比如:

在 2017年9月28号的15.6.2版本,协议由BSD更改为MIT

docs目录

各种项目文档。

eslint-rules目录

eslint的一些规则。

fixtures目录

React固有特性

包括像dom以及React 16很重要的一个更新 React fiber,这里的几个目录内都可以用 npm install 和 npm start跑起来看效果的。

flow目录

flow 类型检查的一些配置。

mocks目录

模拟了简单的用于测试的React组件和子组件。

packages目录

react构建时在此目录基础下进行生产,可以看到这里的目录结构和build目录下的packages(最终用于开发者开发时npm安装的文件)结构一样。

src目录

react源码开发目录,后面会具体分析。

results matching ""

    No results matching ""