前几天有小伙伴和我聊天,谈到现在前端面试越来越难,动不动就是xxx原理,有没有看过xx源码之类的问题, 之后就问我应该怎么来学习现在主流框架的源码,于是有了这一篇文章.

说到使用react那很简单 react 和reactdom 两个文件引入一下就ok,但是这两个文件是经过编译打包,我们无法在里面进行断点调试或者console调试, 所以想学习框架源码,第一步就要在本地运行源码这样才能在内部进行各种输出调试。

好了闲话不说,直接开始正题

React源码获取

在这里我选择用的的版本是16.10.0 , 获取方式当然是react的git仓库

创建测试项目

  • 在本地通过create-react-app创建测试项目
  • 创建完项目之后要修改源码以及webopack配置,需要 将‘旺旺大礼包’给解出来
    npm run eject
  • 项目目录下会多出一个config文件

将创建的项目替换为下载的源码文件

  • 将下载16.10.0的项目源码丢到src目录下
  • 更改配置文件 ==/config/webpack.config.js== 在运行项目的时候编译我们导入的源码为
    resolve:{...,alias: {// Support React Native Web// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/// 'react-native': 'react-native-web',// Allows for better profiling with ReactDevTools// ...(isEnvProductionProfile && {//   'react-dom$': 'react-dom/profiling',//   'scheduler/tracing': 'scheduler/tracing-profiling',// }),// ...(modules.webpackAliases || {}),'react': path.resolve(__dirname, '../src/react/packages/react'),'react-dom': path.resolve(__dirname, '../src/react/packages/react-dom'),'legacy-events': path.resolve(__dirname, '../src/react/packages/legacy-events'),'shared': path.resolve(__dirname, '../src/react/packages/shared'),'react-reconciler': path.resolve(__dirname, '../src/react/packages/react-reconciler'),},}

错误处理

替换完成后,因为版本和编译的原因会遇到各种错误, 具体的错误类型与解决方式,在这里做一个简单的介绍

flow 检测报错

  • 由于react的源码中采用了flow这个东东做类型检查, 所以我们需要安装 ==@babel/plugin-transform-flow-strip-types== 这个插件忽略类型检测
  • 插件安装
npm install @babel/plugin-transform-flow-strip-types -D

  • 插件配置
   //在webpack.config.js的babel-loader中添加配置{test: /.(js|mjs|jsx|ts|tsx)$/,include: paths.appSrc,loader: require.resolve('babel-loader'),options: {customize: require.resolve('babel-preset-react-app/webpack-overrides'),plugins: [...,[require.resolve('@babel/plugin-transform-flow-strip-types')]// 配置忽略flow类型检测],...}

HostConfig配置错误

  • 修改文件 ==src/react/packages/react-reconciler/src/ReactFiberHostConfig.js==, 根据环境去导出HostConfig。
//添加以下代码
export * from './forks/ReactFiberHostConfig.dom';

部分全局变量报错

  • 修改 ==/config/env.js== 中的stringifed对象增加属性
  const stringified = {'process.env': Object.keys(raw).reduce((env, key) => {env[key] = JSON.stringify(raw[key]);return env;}, {}),"__DEV__": true,"__PROFILE__": true,"__UMD__": true};

hasOwnProperty ReactSharedInternals.js错误

  • 修改文件 ==src/react/packages/shared/ReactSharedInternals.js。==
// react此时未export内容,直接从ReactSharedInternals拿值
// import React from 'react';
// 此时React为undefined
// const ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
​
import ReactSharedInternals from '../react/src/ReactSharedInternals';

invariant() 函数报错

  • ==src/react/packages/shared/invariant.js== 文件下 invariant 函数的错误处理
  • 修改如下:
export default function invariant(condition, format, a, b, c, d, e, f) {if(condition) return ;throw new Error('Internal React error: invariant() is meant to be replaced at compile ' +'time. There is no runtime version.',);
}
​

到此为止现在运行的react项目采用的使我们下载导入的react16.10.0的源码,我们就可以在源码里进行输出的错误调试

比如我在react/index.js源码 进行输出测试

'use strict';
​
const React = require('./src/React');
console.log('源码测试',React)
// TODO: decide on the top-level export form.
// This is hacky but makes it work with both Rollup and Jest.
module.exports = React.default || React;

嫌弃本地测试环境配置太麻烦的话,各位小主可以直接从下面的地址拉取我配置好的开发项目

https://github.com/fchangjun/ReactSourceCodeAnalyze.git

build怎么调试 react_React源码下载-本地环境搭建相关推荐

  1. EDK2源码下载及环境搭建

    一.EDK2源码下载 上一片笔记中已经下载了git工具这里用git工具来下载edk2源码及编译工具 首先从github中将edk文件导入到我们的gittee仓库中再从我们的gitee仓库中下拉到我们的 ...

  2. Disconf介绍,源码下载,环境准备,安装,disconf-web使用和配置介绍,项目中进行配置,项目案例运行

    1.disconf介绍 Distributed Configuration Management Platform(分布式配置管理平台)专注于各种 分布式系统配置管理 的通用组件 / 通用平台,提供统 ...

  3. 【Android 逆向】Android 进程注入工具开发 ( 总结 | 源码编译 | 逆向环境搭建使用 | 使用进程注入工具进行逆向操作 ) ★★★

    文章目录 一.Android 进程注入工具开发系列博客 二.Android 进程注入工具 源码下载编译 三.逆向环境搭建 四.使用注入工具进行逆向操作 1.获取远程进程号 2.注入工具准备 3.注入动 ...

  4. Swift之源码编译的环境搭建和编译流程

    编译环境 版本准备:macOS 10.15.3 Xcode 11.5 brew install cmake njnia Python 2.X Swift 源码地址:Apple/Swift 编译流程 ① ...

  5. opengl 编程指南源码下载与环境配置

    首先到:https://github.com/openglredbook/examples 下载源码. 然后启用cmake生成.sln文件 打开两个.sln文件:vermilion9.sln GLFW ...

  6. Elasticsearch源码解析:环境搭建

    在之前学习Redis的过程中,我就是一边通过文档/视频学习,一边阅读源码.我发现两种方法可以相辅相成,互相补充.阅读文档可以帮助我们快速了解某个功能,阅读源码有助于我们更深入的理解这一功能的实现及思想 ...

  7. Spring5源代码研究01:源码导入与环境搭建(完美无错误)

    为了阅读分析Spring 5源代码,需要搭建环境将源代码导入到本地.我们使用IntelliJ IDEA作为IDE工具来分析源码.网上有很多教程要么太老,要么没有经过实践验证,要么不完美报一堆错误. 本 ...

  8. Tomcat源码解析:环境搭建

    下载源码 从github下载tomcat源码 git clone https://github.com/apache/tomcat.git 或者直接fork一份到自己仓库,以便后续添加注释,附上笔者自 ...

  9. 4.2.10 Kafka源码剖析, 阅读环境搭建, broker启动流程, topic创建流程, Producer生产者流程, Consumer消费者流程,

    目录 4.1 Kafka源码剖析之源码阅读环境搭建 4.1.1 安装配置Gradle 4.1.2 Scala的安装和配置 4.1.3 Idea配置 4.1.4 源码操作 4.2 Kafka源码剖析之B ...

最新文章

  1. hexde php_怎样在PHP中把16进制HEX数据转换为2进制数据呢?
  2. Anaconda+用conda创建python虚拟环境
  3. 逆向so_记一次APP的so层算法逆向(七)
  4. 一步步编写操作系统 40 内存分页下用户程序与操作系统的关系
  5. centOS 6 和centOS 7 防火墙指令
  6. 域名解析中“TTL”是什么意思?
  7. python中iskeydown什么函数_isKeyDown不能在Java中工作
  8. 杭电2073无限的路.水题
  9. windows下使用conda命令在anaconda环境中安装caffe
  10. 限时,字节Java程序性能优化宝典大全,这才叫真正的性能优化
  11. FPGA 20个例程篇:7.FLASH读写断电存储
  12. 企业微信可以获取用户unionid吗?
  13. 软件配置管理与 SourceSafe 使用指南
  14. 8个最好用的H5页面制作工具
  15. java ieee_Java IEEE754 工具类
  16. 德国精品软件 小红伞杀毒软件 AntiVir
  17. CUDA + Visual Studio 环境搭建
  18. 禽畜养殖生产智慧管理系统方案
  19. 计算机高级调试员操作网络题,计算机高级操作员实操步骤
  20. 分析业务表 1(BOM)

热门文章

  1. 如何将Chrome本地安装的扩展应用导出到本地
  2. Wordpress插件检测机制原理
  3. 如何使用命令行拿到SAP Kyma的Lambda Function明细
  4. 给特殊类型的Note设置default值
  5. 得到application server上所有的logon user
  6. 使用Java+SAP云平台+SAP Cloud Connector调用ABAP On-Premise系统里的函数
  7. OpenFOAM并行计算方法
  8. php什么是阵列,php – 功能阵列的替代方法?
  9. Java学习规划及就业规划(本人大三)
  10. js 操作vuex数据_Vue.js中使用Vuex实现组件数据共享案例