搭建后的代码(Keep updated):

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

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

环境搭建思路:

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

而后经过webpack的sourceMap查看react的源码
效果以下:
node

步骤

Fork源码

https://github.com/facebook/react
而后执行yarn(yarn 命令会自动执行packages里面的全部依赖安装)
若是太慢, 能够用阿里的源: react

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

理解官方rollup打包

关键文件说明:

scripts/rollup/bundles.js

这个文件用来告诉打包器, 要打包出多少种版本, 这里由于我们在web下阅读源码, 只须要用到UMD_DEV, 能够把其余的场景注释掉, 这里我直接替换变量

而后执行npm run buildwebpack

scripts/rollup/build.js

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

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

构建webpack, 阅读环境

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

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源码, 并能够实时修改web

react v16.12 源码阅读环境搭建