这里要强调一下，大型的开源项目一般都会有一个 Contribution Guide，目的是让想贡献代码的开发者更快上手 。里面就有讲怎么在本地构建代码 。
以 React 为例，React 的 Contributing Guide 里就 Development Workflow 这一节 。里面有这么一段话：
The easiest way to try your changes is to run yarn build core,dom –type=UMD and then open fixtures/packaging/babel-standalone/dev.html. This file already uses react.development.js from the build folder so it will pick up your changes.
所以 React 仓库中的fixtures/packaging/babel-standalone/dev.html 就是一个方便的 demo 页 。我们可以在这个页面快速查看我们在本地对代码的改动 。
你可以尝试着在项目的入口文件中加入一句 log，看看是不是可以在控制台/终端看到这句 log 。如果可以的话，恭喜你，你现在可以随便把玩这个项目了！
理清目录结构在看具体的代码之前，我们需要理清项目的目录结构，这样我们才能更快的知道在哪里地方找相关功能的代码 。
我们看看 React 的目录结构 。React 是一个 monorepo 。也就是一个仓库里包含了多个子仓库 。我们在 packages 目录下可以看到很多单独的 package：
在 React 16 之后，React 的代码分为 React Core，Renderer 和 Reconciler 三部分 。这是因为 React 的设计让我们可以把负责映射数据到 UI 的 Reconciler 以及负责渲染 Vritual DOM 到各个终端的 Renderer 和 React Core 分开 。React Core 包含了 React 的类定义和一些顶级 API 。大部分的渲染和 View 层 diff 的逻辑都在 Reconciler 和 Renderer 中 。
Babel 也是一个 monorepo 。Babel 的核心代码是 babel-core 这个 package，Babel 开放了接口，让我们可以自定义 Visitor，在AST转换时被调用 。所以 Babel 的仓库中还包括了很多插件，真正实现语法转换的其实是这些插件，而不是 babel-core 本身 。
Vuejs 的代码比较典型，核心代码在 src 目录下，按功能模块划分 。因为 Vue 也支持多平台渲染，所以把平台相关的代码都放到了 platform 文件夹下，core 文件夹中是 Vue 的核心代码，compiler 是 Vue 的模板编译器，把 HTML 风格的模板编译为 render function 。
Webpack 和 Babel 一样，可以说都是基于插件的系统 。Webpack 的主要源码在 lib 目录下，里面的 webpack.js 就是入口文件 。
上面说了四个项目的目录结构，那我们遇到一个新的开源项目，应该怎么了解它的目录结构呢？
如果这个项目是一个 monorepo，首先我们要找到核心的那个 package，然后看里面的代码 。
不是 monorepo 的话，一般来说，如果这个项目是一个 CLI 的工具，那 bin 目录下放的就是命令行界面相关的入口文件，lib 或者 src 下面就是工具的核心代码 。如果这个项目是一个前端 View 层框架，那目录结构就和 Vue 类似 。
作为验证，大家可以看一下打包工具 parcel 和前端 View 层库 moon 的目录结构 。目录结构这个东西往往是大同小异，多看几个项目就熟悉了 。
debugger && 全局搜索大法运行了本地的 build，了解了目录结构，接下来我们就可以开始看源码了！之前说了，我们要以问题驱动，下面我就以 React 调用 setState 前后发生了什么这个问题作为例子 。
我们可以在 setState 的地方打一个断点 。首先我们要找到 setState 在什么地方 。这个时候之前的准备工作就派上用处了 。我们知道 React 的共有 API 在 react 这个 package 下面 。我们就在那个 package 里面全局搜索 。我们发现这个 API 定义在 src/ReactBaseClasses.js 这个文件里 。
于是我们就在这里打一个断点：
然后运行本地 React build 的 demo 页面，让组件触发 setState，我们就可以在 Devtool 里看到断点了 。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

• 苹果手机备份短信的软件 ipone短信怎么多选删除
• 条形码扫描器在线使用 二维码扫描在线识别
• 舍我其谁全集免费观看,舍我其谁在线观看平台链接分享
• 教你用mac命令行查看内存 mac查看内存使用情况
• 1-16集 《云南虫谷》无删减电视剧免费在线播放 高清
• htc手机所有型号图片 htc那一款好用
• 家用摄像头监控价格表 「连手机的监控摄像头价格」
• iPhone13发布在即，旧款苹果手机重回低价 苹果13手机价格和图片
• 苹果手机价格跳水！深圳华强北iPhone 12直降超千元 苹果13手机价格和图片
• 关于发布日期、价格、规格等的激动人心的传闻 苹果13手机价格和图片