前幾天有小伙伴和我聊天，談到現(xiàn)在前端面試越來(lái)越難，動(dòng)不動(dòng)就是xxx原理，有沒(méi)有看過(guò)xx源碼之類(lèi)的問(wèn)題, 之后就問(wèn)我應(yīng)該怎么來(lái)學(xué)習(xí)現(xiàn)在主流框架的源碼，于是有了這一篇文章.

說(shuō)到使用react那很簡(jiǎn)單 react 和reactdom 兩個(gè)文件引入一下就ok，但是這兩個(gè)文件是經(jīng)過(guò)編譯打包，我們無(wú)法在里面進(jìn)行斷點(diǎn)調(diào)試或者console調(diào)試， 所以想學(xué)習(xí)框架源碼，第一步就要在本地運(yùn)行源碼這樣才能在內(nèi)部進(jìn)行各種輸出調(diào)試。

好了閑話(huà)不說(shuō)，直接開(kāi)始正題

React源碼獲取

在這里我選擇用的的版本是16.10.0 ， 獲取方式當(dāng)然是react的git倉(cāng)庫(kù)

創(chuàng)建測(cè)試項(xiàng)目

• 在本地通過(guò)create-react-app創(chuàng)建測(cè)試項(xiàng)目
• 創(chuàng)建完項(xiàng)目之后要修改源碼以及webopack配置,需要 將‘旺旺大禮包’給解出來(lái)
  npm run eject
• 項(xiàng)目目錄下會(huì)多出一個(gè)config文件

將創(chuàng)建的項(xiàng)目替換為下載的源碼文件

• 將下載16.10.0的項(xiàng)目源碼丟到src目錄下

• 更改配置文件 ==/config/webpack.config.js== 在運(yùn)行項(xiàng)目的時(shí)候編譯我們導(dǎo)入的源碼為

resolve:{...,alias: {// Support React Native Web// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/// 'react-native': 'react-native-web',// Allows for better profiling with ReactDevTools// ...(isEnvProductionProfile && {// 'react-dom$': 'react-dom/profiling',// 'scheduler/tracing': 'scheduler/tracing-profiling',// }),// ...(modules.webpackAliases || {}),'react': path.resolve(__dirname, '../src/react/packages/react'),'react-dom': path.resolve(__dirname, '../src/react/packages/react-dom'),'legacy-events': path.resolve(__dirname, '../src/react/packages/legacy-events'),'shared': path.resolve(__dirname, '../src/react/packages/shared'),'react-reconciler': path.resolve(__dirname, '../src/react/packages/react-reconciler'),},} 錯(cuò)誤處理

替換完成后，因?yàn)榘姹竞途幾g的原因會(huì)遇到各種錯(cuò)誤， 具體的錯(cuò)誤類(lèi)型與解決方式，在這里做一個(gè)簡(jiǎn)單的介紹

flow 檢測(cè)報(bào)錯(cuò)

• 由于react的源碼中采用了flow這個(gè)東東做類(lèi)型檢查， 所以我們需要安裝 ==@babel/plugin-transform-flow-strip-types== 這個(gè)插件忽略類(lèi)型檢測(cè)
• 插件安裝

npm install @babel/plugin-transform-flow-strip-types -D

• 插件配置

//在webpack.config.js的babel-loader中添加配置{test: /.(js|mjs|jsx|ts|tsx)$/,include: paths.appSrc,loader: require.resolve('babel-loader'),options: {customize: require.resolve('babel-preset-react-app/webpack-overrides'),plugins: [...,[require.resolve('@babel/plugin-transform-flow-strip-types')]// 配置忽略flow類(lèi)型檢測(cè)],...}

HostConfig配置錯(cuò)誤

• 修改文件 ==src/react/packages/react-reconciler/src/ReactFiberHostConfig.js==, 根據(jù)環(huán)境去導(dǎo)出HostConfig。

//添加以下代碼 export * from './forks/ReactFiberHostConfig.dom';

部分全局變量報(bào)錯(cuò)

• 修改 ==/config/env.js== 中的stringifed對(duì)象增加屬性

const stringified = {'process.env': Object.keys(raw).reduce((env, key) => {env[key] = JSON.stringify(raw[key]);return env;}, {}),"__DEV__": true,"__PROFILE__": true,"__UMD__": true};

hasOwnProperty ReactSharedInternals.js錯(cuò)誤

• 修改文件 ==src/react/packages/shared/ReactSharedInternals.js。==

// react此時(shí)未export內(nèi)容，直接從ReactSharedInternals拿值 // import React from 'react'; // 此時(shí)React為undefined // const ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; ? import ReactSharedInternals from '../react/src/ReactSharedInternals';

invariant() 函數(shù)報(bào)錯(cuò)

• ==src/react/packages/shared/invariant.js== 文件下 invariant 函數(shù)的錯(cuò)誤處理
• 修改如下:

export default function invariant(condition, format, a, b, c, d, e, f) {if(condition) return ;throw new Error('Internal React error: invariant() is meant to be replaced at compile ' +'time. There is no runtime version.',); } ?

到此為止現(xiàn)在運(yùn)行的react項(xiàng)目采用的使我們下載導(dǎo)入的react16.10.0的源碼，我們就可以在源碼里進(jìn)行輸出的錯(cuò)誤調(diào)試

比如我在react/index.js源碼 進(jìn)行輸出測(cè)試

'use strict'; ? const React = require('./src/React'); console.log('源碼測(cè)試',React) // TODO: decide on the top-level export form. // This is hacky but makes it work with both Rollup and Jest. module.exports = React.default || React;

嫌棄本地測(cè)試環(huán)境配置太麻煩的話(huà)，各位小主可以直接從下面的地址拉取我配置好的開(kāi)發(fā)項(xiàng)目

https://github.com/fchangjun/ReactSourceCodeAnalyze.git

總結(jié)

以上是生活随笔為你收集整理的build怎么调试 react_React源码下载-本地环境搭建的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。