脚本宝典收集整理的这篇文章主要介绍了

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模板文件

clipboard.png

webpack的配置

概要

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/'),
    }
  }
};

babel配置

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

入口文件

概述

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

index.js

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 <div>hello world</div>
  }
}

ReactDOM.render(<Hello></Hello>, document.getElementById('root'));

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

tpl.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root">
    hello world;
  </div>
</body>
</html>

概述

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

This module must be shimmed by a specific renderer.

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

问题并不来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的问题,也纠结了好久,最终终于配起了这套环境。

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

总结

以上是脚本宝典为你收集整理的

react源码阅读环境配置

全部内容,希望文章能够帮你解决

react源码阅读环境配置

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过