react源码阅读环境配置

摘要：会有一探源码的想法。理想的情况是直接引用源文件，也就是上仓库中，目录下的代码，直接阅读的代码。所以需要配置打包成。坑概述至此，环境已经配的差不多了。不过这个环境配置过程中并非一帆风顺。

阅读源码时，有许多变量在程序运行过程中不断的产生，其中存放着什么东西，一直是一个比较头疼的问题。不停的推导增加了验算的负担，随着代码逐渐的深入，也会产生一定的记忆负担。如果靠脑袋去记，简单点的代码还好。复杂的代码。。。你懂的。
随着react被广泛使用，很多人会好奇react是怎么实现的。会有一探源码的想法。如果直接阅读react.development.js是很简单，页面引入就好了。但是react.development.js终于是经过编译工具编译过的代码，很多的代码看起来并不直观。理想的情况是直接引用源文件，也就是github上react仓库中，packages目录下的代码，直接阅读es6的代码。
但是es6代码浏览器支持并不友好。所以需要配置webpack打包成es5。同时需要配上sourceMap。这样，既可以让源码跑在浏览器环境，也可以直接读es6的代码，而且可以随时打断点，查看变量里保存的值。

那么，闲言少叙，开始本章的主题。

这是我目前用的一个简单的目录结构。此次调试的代码为react 16.4.0

node_modules 存放依赖的包

packages github上的packages文件夹直接拿来用

test-env 测试用的目录

index.js #引用react、react-dom的启动文件

index.less

tpl.html # html模板文件

webpack的配置就是常规的babel，和一堆loader。为了提高打包速度，可以使用Happypack插件。如果觉得速度还不够快，可以再引入DLLplugin。此处webpack的使用不是重点，在此只是简单给出打包需要的基本配置
代码如下：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
const os = require("os");
const HappyPack = require("happypack");
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module.exports = {
  mode: "development",
  entry: "./test-env/index.js",
  output: {
    path: __dirname + "/dist",
    filename: "index_bundle.js"
  },
  module: {
    rules: [{
        test: /.css$/,
        use: {
          loader: "happypack/loader?id=happyLess",
        }
      },
      {
        test: /.less$/,
        use: {
          loader: "happypack/loader?id=happyLess",
        }
      },
      {
        test: /.js$/,
        use: {
          loader: "happypack/loader?id=happyBabel",
        }
      }
    ]
  },
  plugins: [
    
    new HtmlWebpackPlugin({
      template: "./test-env/tpl.html"
    }), new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      __DEV__: true,
      NODE_ENV:JSON.stringify("development"),
      spyOnDev: false,
      spyOnDevAndProd: false,
      spyOnProd: false,
      __PROFILE__: true,
    }),
    new HappyPack({
        //用id来标识 happypack处理那里类文件
      id: "happyBabel",
      //如何处理  用法和loader 的配置一样
      loaders: [{
        loader: "babel-loader?cacheDirectory=true",
      }],
      //共享进程池
      threadPool: happyThreadPool,
      //允许 HappyPack 输出日志
      verbose: true,
    }),
    new HappyPack({
      //用id来标识 happypack处理那里类文件
      id: "happyLess",
      //如何处理  用法和loader 的配置一样
      loaders: ["style-loader","css-loader","less-loader"],
      //共享进程池
      threadPool: happyThreadPool,
      //允许 HappyPack 输出日志
      verbose: true,
    }),
  ],
  devtool: "inline-source-map", // enum
  devServer: {
    contentBase: path.join(__dirname, "test-env"),
    port: 9000,
    hot: true,
    overlay: true
  },
  resolve: {
    modules: [
      "node_modules",
      path.resolve(__dirname, "packages"),
      path.resolve(__dirname, "packages/shared")
    ],
    alias: {
      "@packages": path.resolve(__dirname, "packages/"),
    }
  }
};

{
  "presets": ["env","react","stage-0"],
}

为了简化项目流程，此处用了一个最简单的tpl.html模板文件，通过webpackhtmlplugin引入了打包好后的带sourcemap的js。
其中，js只是用react实现了一个简单的Hello world并且用react-render渲染到页面上。

import "./index.less";
import React, {Component} from "@packages/react";
import ReactDOM from "@packages/react-dom/index.js";

class Hello extends Component{
  constructor(){
    super();
    console.log("hello world");
  }

  render() {
    return 
hello world
  }
}

ReactDOM.render(, document.getElementById("root"));

其中@packages是我在webpack中配置的路径别名，对应packages目录。

  
  
  
  


  

    hello world;
  

至此，环境已经配的差不多了。只是实际运行的时候还是需要安装一些包。此处忽略了装包的过程。但是实际项目运行中控制台还是报了一些错。其中一个最纠结的地方

自环境配好后我遇到的第一个问题是这句话。起初以为是react的问题。纠结了好几个小时候，才找到了问题的根源。

既然问题不是react，那来自哪里呢。没错，来自react-dom，因为页面上总共就引用了两个包，非react则react-dom

通过错误信息处函数调用堆栈可以看出，该错误来源于一个ReactFiberHostConfig.js中。虽然不知道这里为什么会有这个，但是还是想去源仓库找找答案。看了react官方实际使用了rollup去打包代码。但是rollup里一大坨看不懂得代码。那怎么办呢。去搜索这个hostconfig.js是什么鬼。

react为了实现将同样的结构，render到不同的平台，使用了react-reconciler做了一个中间层。提供接口可以让用户自定义render的实现，并且给出了一个render-dom的示例。但是不管使用哪种render，都要提供一个hostconfig,源码中这个react-reconciler文件夹中引用的config总是会抛出一段错误，但是实际上，正确的config已经在文件夹中给出，只要将抛错这段代码给替换成引用正确的config即可。

错误调用栈 react-dom-》react-reconciler-》hostconfig error

解决

react-reconclier中src下的ReactFiberHostConfig中的报错改为引用正确的config。贴上引用代码

export * from "./forks/ReactFiberHostConfig.dom";

至此已经可以在浏览器中调试es6版本的react代码。不过这个环境配置过程中并非一帆风顺。首先遇到错首先以为是react的问题。纠结了好几个晚上(下班后才开始想)，网上查阅了很多资料，也没想出所以然，最后发现是react-dom的问题，也纠结了好久，最终终于配起了这套环境。

喜欢的朋友点个赞哈。谢谢支持。