脚本宝典收集整理的这篇文章主要介绍了react源码阅读环境配置,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前言
阅读源码时,有许多变量在程序运行过程中不断的产生,其中存放着什么东西,一直是一个比较头疼的问题。不停的推导增加了验算的负担,随着代码逐渐的深入,也会产生一定的记忆负担。如果靠脑袋去记,简单点的代码还好。复杂的代码。。。你懂的。
随着react被广泛使用,很多人会好奇react是怎么实现的。会有一探源码的想法。如果直接阅读react.development.js是很简单,页面引入就好了。但是react.development.js终于是经过编译工具编译过的代码,很多的代码看起来并不直观。理想的情况是直接引用源文件,也就是github上react仓库中,packages目录下的代码,直接阅读es6的代码。
但是es6代码浏览器支持并不友好。所以需要配置webpack打包成es5。同时需要配上sourceMap。这样,既可以让源码跑在浏览器环境,也可以直接读es6的代码,而且可以随时打断点,查看变量里保存的值。
那么,闲言少叙,开始本章的主题。
目录结构
概述
这是我目前用的一个简单的目录结构。此次调试的代码为react 16.4.0
详情
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:384754419,请注明来意。