搭建后的代码(Keep updated):

https://github.com/lirongfei123/read-react

欢迎将源码阅读遇到的问题提到issue

环境搭建思路:

搭建一个webpack的demo, 对react的引用直接访问其源码
关键源码

然后通过webpack的sourceMap查看react的源码
效果如下:

步骤

Fork源码

https://github.com/facebook/react
然后执行yarn(yarn 命令会自动执行packages里面的所有依赖安装)
如果太慢, 可以用阿里的源:

 yarn config set registry 'https://registry.npm.taobao.org'

理解官方rollup打包

关键文件说明:

scripts/rollup/bundles.js

这个文件用来告诉打包器, 要打包出多少种版本, 这里因为咱们在web下阅读源码, 只需要用到UMD_DEV, 可以把其他的场景注释掉, 这里我直接替换变量


然后执行npm run build

scripts/rollup/build.js

这个是真正的打包文件, 这里我们需要将rollup打包的一些特殊设置找出来, 然后转化为webpack的配置

  1. 打包会替换一些动态内容, 比如: 报错信息, 只会在dev环境存在, prod不存在
    1. 这个主要是通过babel动态替换, 所以我们需要将babel插件提取出来
    2. 可以通过getBabelConfig获取, 建议看下这个函数,  引用了那几个本机插件即可, 主要引用了scripts/babel下面两个, 以及scripts/error-codes中一个
    3. 实际真正需要的是两个plugin
    4. 所以只需要将这两个插件引用到webpack的babel里面即可
  2. 替换一些不同环境的文件, 比如: react-native 和 react 中用到的一些东西, 肯定是不一样的, 但是接口一样, 就会根据打包类似动态替换
    1. 这个主要是通过动态替换模块的源路径实现的
    2. 这个可以通过getForks来获取
    3. 这里我已经提取出来, 并通过一个简单的webpack配置进行处理(见: webpack/replace.js)这里需要将umd相关的东西删除, 具体原因未知
    4. 主要是这些文件
  3. 替换一些打包变量, 基本都设置为debug模式即可, 根据scripts/jest/setupEnvironment.js 进行设置

构建webpack, 阅读环境

基本和平时的项目一样, 区别在于react的代码从源码直接引用, 详细查看webpack/webpack.config.js
这里简单贴下源码

const path = require('path');
const webpack = require('webpack');
const __debug= true;
const replacePlugin = require('./replace');
module.exports = {
entry: {
main: './src/index.js',
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].js'
},
resolve: {
modules: [
path.join(__dirname, '../packages'),
'node_modules',
]
},
module: {
rules: [
{
loader: "babel-loader",
options: {
babelrc: false,
presets: [
[
"@babel/preset-env",
{
targets: {
esmodules: true,
browsers: "> 0.25%, not dead"
},
debug: __debug,
modules: 'umd',
forceAllTransforms: !__debug,
useBuiltIns: false
}
],
[
"@babel/preset-react",
{
development: false
}
],
'@babel/preset-flow'
],
plugins: [
require('../scripts/error-codes/transform-error-messages'),
// Wrap warning() calls in a __DEV__ check so they are stripped from production.
require('../scripts/babel/wrap-warning-with-env-check'),
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-object-rest-spread'
]
}
},
]
},
mode: 'development',
plugins: [
new webpack.DefinePlugin({
__DEV__: 'true',
__PROFILE__: 'true',
__UMD__: 'true',
__EXPERIMENTAL__: true,
'process.env.NODE_ENV': "'development'"
}),
new replacePlugin()
],
devServer: {
port: 3100
}
}

然后npm start即可开始

在ReactDOM.render前面加个debugger即可进入所有的react源码, 并可以实时修改

react v16.12 源码阅读环境搭建的更多相关文章

  1. 基于Eclipse IDE的Ardupilot飞控源码阅读环境搭建

    基于Eclipse IDE的Ardupilot飞控源码阅读环境搭建 作者:Awesome 日期:2017-10-21 需准备的软件工具 Ardupilot飞控源码 PX4 toolchain JAVA ...

  2. Spring5源码阅读环境搭建-gradle构建编译

      前沿:Spring系列生态十分丰富,涉及到各个方面.但是作为Spring生态的核心基础Spring,是最重要的环节,需要理解Spring的设计原理,我们需要解读源码.   在构建Spring源码阅 ...

  3. Hadoop源码阅读环境搭建(IDEA)

    拿到一份Hadoop源码之后,经常关注的两件事情就是 1.怎么阅读?涉及IDEA和Eclipse工程搭建.IDEA搭建,选择源码,逐步导入即可:Eclipse可以选择后台生成工程,也可以选择IDE导入 ...

  4. Spring源码阅读环境搭建

    目录 安装gradle 导入Spring源码 创建测试模块my-test 其他问题 spring-aspects模块构建时报错 本文思维导图 本文将粗略的搭建一个Spring源码的阅读环境,为后面的源 ...

  5. spring-framework-4.1.x源码阅读环境搭建(导入Eclipse)

    注意:搭建spring-framework-4.1.x源码 eclipse工作空间需要安装jdk8. spring-framework-4.1.x项目采用目前主流的项目管理工具gradle进行构建,至 ...

  6. 【深入浅出 Yarn 架构与实现】1-2 搭建 Hadoop 源码阅读环境

    本文将介绍如何使用 idea 搭建 Hadoop 源码阅读环境.(默认已安装好 Java.Maven 环境) 一.搭建源码阅读环境 一)idea 导入 hadoop 工程 从 github 上拉取代码 ...

  7. 搭建 Spring 源码阅读环境

    前言 有一个Spring源码阅读环境是学习Spring的基础.笔者借鉴了网上很多搭建环境的方法,也尝试了很多,接下来总结两种个人认为比较简便实用的方法.读者可根据自己的需要自行选择. 方法一:搭建基础 ...

  8. Mac搭建Hadoop源码阅读环境

    1.本次Hadoop源码阅读环境使用的阅读工具是idea,Hadoop版本是2.7.3.需要安装的工具包括idea.jdk.maven.protobuf等 2.jdk,使用的版本是1.8版,在jdk官 ...

  9. win7+idea+maven搭建spark源码阅读环境

    1.参考. 利用IDEA工具编译Spark源码(1.60~2.20) https://blog.csdn.net/He11o_Liu/article/details/78739699 Maven编译打 ...

随机推荐

  1. vim编辑Dockerfile时语法高亮

    参考Dockerfile构建容器---语法高亮 三个文件扔进相关的目录即可 1. /usr/share/vim/vimfiles/doc/dockerfile.txt *dockerfile.txt* ...

  2. Codeforces 1215D. Ticket Game

    传送门 博弈,发现情况有点多,分析一下把有用的状态提取出来 显然各个位置的数字是没用的,我们只要知道两边的数字和分别是多少 并且状态显然和左右两边的 "?" 数量有关 因为最终我们 ...

  3. ElasticSearch5.3安装IK分词器并验证

    ElasticSearch5.3安装IK分词器 之前使用Elasticsearch安装head插件成功了,但是安装IK分词器却失败了.貌似是ElasticSearch5.0以后就不支持直接在elast ...

  4. C# 从集合A中取出集合B中不包含的数据(根据ID判断),并添加到集合B中

    从一个集合A中取出另一个集合B中不包含的数据,并添加到集合B中 private void button2_Click(object sender, EventArgs e) { var ListA = ...

  5. Mac中如何查看电脑的IP地址

    方法一:使用ifconfig命令 方法二:在charles中查看 Charles 的顶部菜单的 “Help”->”Local IP Address”,即可在弹出的对话框中看到 IP 地址,如下图 ...

  6. 什么是 MicroPython ?它有什么优势?

    MicroPython 和 Python 都是一类 Python 的动态语言解释器. 若是在系统里安装了 Python 解释器,例如在 Windows 或者 Linux 命令行输入 python,进入 ...

  7. Vue安装与简单使用

    Vue入门 使用Typora打开https://pan.baidu.com/s/1Mf3ZFSthdVUQevqWr777eA 提取码: hg9b vue中文官网教学 安装与使用,我也经常看这个 点击 ...

  8. .htaccess A网站单页面301到B网站单页面

      .htaccess 301问题 A网站  a.com/a.html 301到 B网站 b.com/b.html   RewriteRule ^a.com/a.html$ http://www.b. ...

  9. Berlekamp-Massey algorithm

    https://www.cnblogs.com/zzqsblog/p/6877339.html https://blog.csdn.net/qq_39972971/article/details/80 ...

  10. 微信小程序购物车功能

    <view class='shop-mana'> <text class='management'>管理您的购物车</text> <text class='g ...