react v16.12 源码阅读环境搭建
搭建后的代码(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的配置
- 打包会替换一些动态内容, 比如: 报错信息, 只会在dev环境存在, prod不存在
- 这个主要是通过babel动态替换, 所以我们需要将babel插件提取出来
- 可以通过getBabelConfig获取, 建议看下这个函数, 引用了那几个本机插件即可, 主要引用了scripts/babel下面两个, 以及scripts/error-codes中一个
- 实际真正需要的是两个plugin
- 所以只需要将这两个插件引用到webpack的babel里面即可
- 替换一些不同环境的文件, 比如: react-native 和 react 中用到的一些东西, 肯定是不一样的, 但是接口一样, 就会根据打包类似动态替换
- 这个主要是通过动态替换模块的源路径实现的
- 这个可以通过getForks来获取
- 这里我已经提取出来, 并通过一个简单的webpack配置进行处理(见: webpack/replace.js)这里需要将umd相关的东西删除, 具体原因未知
- 主要是这些文件
- 替换一些打包变量, 基本都设置为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 源码阅读环境搭建的更多相关文章
- 基于Eclipse IDE的Ardupilot飞控源码阅读环境搭建
基于Eclipse IDE的Ardupilot飞控源码阅读环境搭建 作者:Awesome 日期:2017-10-21 需准备的软件工具 Ardupilot飞控源码 PX4 toolchain JAVA ...
- Spring5源码阅读环境搭建-gradle构建编译
前沿:Spring系列生态十分丰富,涉及到各个方面.但是作为Spring生态的核心基础Spring,是最重要的环节,需要理解Spring的设计原理,我们需要解读源码. 在构建Spring源码阅 ...
- Hadoop源码阅读环境搭建(IDEA)
拿到一份Hadoop源码之后,经常关注的两件事情就是 1.怎么阅读?涉及IDEA和Eclipse工程搭建.IDEA搭建,选择源码,逐步导入即可:Eclipse可以选择后台生成工程,也可以选择IDE导入 ...
- Spring源码阅读环境搭建
目录 安装gradle 导入Spring源码 创建测试模块my-test 其他问题 spring-aspects模块构建时报错 本文思维导图 本文将粗略的搭建一个Spring源码的阅读环境,为后面的源 ...
- spring-framework-4.1.x源码阅读环境搭建(导入Eclipse)
注意:搭建spring-framework-4.1.x源码 eclipse工作空间需要安装jdk8. spring-framework-4.1.x项目采用目前主流的项目管理工具gradle进行构建,至 ...
- 【深入浅出 Yarn 架构与实现】1-2 搭建 Hadoop 源码阅读环境
本文将介绍如何使用 idea 搭建 Hadoop 源码阅读环境.(默认已安装好 Java.Maven 环境) 一.搭建源码阅读环境 一)idea 导入 hadoop 工程 从 github 上拉取代码 ...
- 搭建 Spring 源码阅读环境
前言 有一个Spring源码阅读环境是学习Spring的基础.笔者借鉴了网上很多搭建环境的方法,也尝试了很多,接下来总结两种个人认为比较简便实用的方法.读者可根据自己的需要自行选择. 方法一:搭建基础 ...
- Mac搭建Hadoop源码阅读环境
1.本次Hadoop源码阅读环境使用的阅读工具是idea,Hadoop版本是2.7.3.需要安装的工具包括idea.jdk.maven.protobuf等 2.jdk,使用的版本是1.8版,在jdk官 ...
- win7+idea+maven搭建spark源码阅读环境
1.参考. 利用IDEA工具编译Spark源码(1.60~2.20) https://blog.csdn.net/He11o_Liu/article/details/78739699 Maven编译打 ...
随机推荐
- 一道最大公约数的题:easy number
现有n个Zack,每个Zack有一个一个能力值,从这n个Zack中选出k个,使他们的最大公约数的值最大 [输入格式] 第一行有一个整数n,代表有n个Zack 第二行n个整数ai,代表每个Zack的能力 ...
- 运维LVS-NAT模式理解
一.LVS-NAT模式的工作原理这个是通过网络地址转换的方法来实现调度的.首先调度器(LB)接收到客户的请求数据包时(请求的目的IP为VIP),根据调度算法决定将请求发送给哪个 后端的真实服务器(RS ...
- jQuery中outerWidth()方法
截图自:菜鸟教程https://www.runoob.com/jquery/html-outerwidth.html
- 深入理解Java的反射机制
https://blog.csdn.net/u012585964/article/details/52011138 http://www.importnew.com/20339.html 一,java ...
- poj 1664 放苹果(dfs)
放苹果 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 30284 Accepted: 19098 Description ...
- python-装饰器1
python-装饰器1 定义本质就是函数,(装饰其他函数)就是为其他函数添加附加功能原则:1.不能修改被装饰的函数的源代码2.不能修改被装饰的函数的调用方式 def logger(): print(' ...
- mysql个人初配置
记录下在ubuntu 18.04.3 LTS环境中安装mysql和个人初期简单设置. 1:安装myslq:sudo apt install mysql-server. 2:设置root密码.由于我没有 ...
- u-boot v2018.01 启动流程分析 简单版(转)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_39655765/artic ...
- DECLARE_GLOBAL_DATA_PTR
DECLARE_GLOBAL_DATA_PTR在arch/arm/include/asm/global_data.h中定义 #include <asm-generic/global_data.h ...
- CF 1272F Two Bracket Sequences (括号dp)
题目地址 洛谷CF1272F Solution 首先题目中有两个括号串 \(s\) 和 \(t\) ,考虑先设计两维表示 \(s\) 匹配到的位置和 \(t\) 匹配到的位置. 接着根据 括号dp的一 ...