建物コード（更新してください）：

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

ソース述べた問題を読んで発生した問題へようこそ

アイデアを構築するための環境：

WebPACKのにデモを構築し、基準は、ソースコードへの直接アクセスを反応させる
キー源

とsourceMapのWebPACKによって反応ソースを視聴
効果は以下の通りであります：

ステップ

フォークソース

https://github.com/facebook/react
行う糸（糸コマンドは、自動的にすべての依存パッケージをインストール内部の実行）次に、
遅すぎる場合に、することができますアリソース：

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

公式のロールアップパッケージを理解します

キー文書は、以下について説明します。

スクリプト/ロールアップ/ bundles.js

このファイルは、ここで我々は唯一UMD_DEVを使用する必要があるソースコードを、読みウェブであるため、他のシーンをコメントアウトすることができ、バージョンの数をパックするパッカーを伝えるために使用され、ここで私の直接の置換変数され

、その後、NPMの実行ビルドを実行します

スクリプト/ロールアップ/ build.js

これは、ここで我々はいくつかの特別なロールアップパッケージが出て設定し、WebPACKの構成に見つける必要があり、実際のパッケージファイルであります

PRODが存在しない場合、エラーメッセージのみのdevの環境に存在しています：包装のようなは、いくつかの動的なコンテンツを交換します
1. これは、バベルの動的交換を介して主にあるので、我々は、プラグインバベルから抽出される必要があります
2. getBabelConfigすることによって得ることができる、お薦めは、Aにそのいくつかのネイティブプラグイン、主に引用されたスクリプト/バベル次の2、およびスクリプト/エラー・コードを引用し、この機能をfacie
4. 実際、本当に必要性は、二つのプラグインです
6. あなただけのバベルのWebPACKことができ、これらの2つのプラグインを参照する必要があります
替换一些不同环境的文件, 比如: react-native 和 react 中用到的一些东西, 肯定是不一样的, 但是接口一样, 就会根据打包类似动态替换
1. 这个主要是通过动态替换模块的源路径实现的
2. 这个可以通过getForks来获取
4. 这里我已经提取出来, 并通过一个简单的webpack配置进行处理(见: webpack/replace.js)这里需要将umd相关的东西删除, 具体原因未知
5. 主要是这些文件
替换一些打包变量, 基本都设置为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源码, 并可以实时修改

ソースはビルドにv16.12の読書環境を反応させます