前幾天有小伙伴和我聊天，談到現在前端面試越來越難，動不動就是xxx原理，有沒有看過xx源碼之類的問題, 之后就問我應該怎么來學習現在主流框架的源碼，于是有了這一篇文章.

說到使用react那很簡單 react 和reactdom 兩個文件引入一下就ok，但是這兩個文件是經過編譯打包，我們無法在里面進行斷點調試或者console調試， 所以想學習框架源碼，第一步就要在本地運行源碼這樣才能在內部進行各種輸出調試。

好了閑話不說，直接開始正題

React源碼獲取

在這里我選擇用的的版本是16.10.0 ， 獲取方式當然是react的git倉庫

創建測試項目

• 在本地通過create-react-app創建測試項目
• 創建完項目之后要修改源碼以及webopack配置,需要 將‘旺旺大禮包’給解出來
  npm run eject
• 項目目錄下會多出一個config文件

將創建的項目替換為下載的源碼文件

• 將下載16.10.0的項目源碼丟到src目錄下

• 更改配置文件 ==/config/webpack.config.js== 在運行項目的時候編譯我們導入的源碼為

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'),},} 錯誤處理

替換完成后，因為版本和編譯的原因會遇到各種錯誤， 具體的錯誤類型與解決方式，在這里做一個簡單的介紹

flow 檢測報錯

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

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類型檢測],...}

HostConfig配置錯誤

• 修改文件 ==src/react/packages/react-reconciler/src/ReactFiberHostConfig.js==, 根據環境去導出HostConfig。

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

部分全局變量報錯

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

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錯誤

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

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

invariant() 函數報錯

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

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

到此為止現在運行的react項目采用的使我們下載導入的react16.10.0的源碼，我們就可以在源碼里進行輸出的錯誤調試

比如我在react/index.js源碼 進行輸出測試

'use strict'; ? const React = require('./src/React'); console.log('源碼測試',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;

嫌棄本地測試環境配置太麻煩的話，各位小主可以直接從下面的地址拉取我配置好的開發項目

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。