如何在本地環境運行 react 源碼倉庫

fork 官方倉庫 facebook/react #

通常開源的項目裡都有一個 CONTRIBUTING.md 文件，來讓其他的開發者知道如何貢獻這個項目，或者看這個項目的 .github/workflows 裡的一些運行測試、發布的 action 都可以找到運行這個項目的有效信息

本地下載克隆的倉庫

git clone [email protected]:Debbl/react.git

VSCode 環境#

使用 VSCode 打開

code react

插件#

因為 react 是使用 flow 語言（類似 ts ）寫的所以需要在 VSCode 提供相關語言的支持在 VSCode 中下載 flow 語言的插件 flow-for-vscode

.vscode/extensions.json

{
    "recommendations": [
        "flowtype.flow-for-vscode"
    ]
}

設定#

在本地的打開的倉庫的根目錄創建下面這個文件

.vscode/settings.json

{ 
    "javascript.validate.enable": false,
    "typescript.validate.enable": false,
    "flow.enabled": true,
    "flow.useNPMPackagedFlow": true
}

解釋一下這裡的配置，前兩個是禁用默認的 js ts 檢查，然後開啟 flow 插件，並且使用 node_modules 下的 flow 運行，這兩個其實是默認開啟的，更多詳細的配置 flow-for-vscode#configuration

本機環境#

這裡可以直接參考 contribution-prerequisites 的官方文檔，但是有幾個需要注意的地方

.nvmrc 裡對應的 node 版本，最好安裝對應的版本
package.json 的 packageManager 有對應的 yarn 版本
java 環境沒有明確說什麼版本，我這裡安裝的是 java 17.0.11 2024-04-16 LTS

gcc 環境

安裝依賴，環境檢查#

這裡可以參考文檔的這一部分 sending-a-pull-request

完全使用 yarn.lock 安裝，這裡推薦一個好用的工具 antfu-collective/ni 直接使用 nci 安裝，我也參考別人的項目寫了一個 rust 的版本 Debbl/nci

yarn install --frozen-lockfile

因為我使用的是 M1 芯片，在安裝的過程中遇到了幾個問題

/bin/sh: autoreconf: command not found 使用 brew 安裝 brew install autoconf
如果上一步是使用 brew 安裝的會遇到一個問題 error-cant-exec-aclocal-with-homebrew-installed-autoreconf-on-mac 需要安裝 brew install automake
optipng-bin 依賴報錯，可以看這個 optipng-bin/issues/117

配置 flow 環境#

yarn flow

這裡直接運行這個命令會要求選擇對應的環境

這裡使用 dom-node 環境

yarn flow dom-node

執行完成之後會發現在根目錄多了一個 .flowconfig 文件

檢查 flow 有沒有生效#

完成之後 VSCode 就會有提示了

測試，本地運行#

yarn test

本地運行打包好的 react#

可以參考文檔的 development-workflow

cd build/oss-experimental/react
yarn link

cd build/oss-experimental/react-dom
yarn link

這裡注意 node 環境的話需要 link 三個倉庫 react react-dom scheduler

也可以直接使用 fixtures 目錄的環境，這裡我使用 fixtures/packaging/webpack/dev

cd fixtures/packaging/webpack/dev

yarn

yarn build

這裡需要替換一下 input.js 文件，新版 ReactDom 裡沒有 render 函數了

fixtures/packaging/webpack/dev/input.js

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  React.createElement('h1', null, 'Hello World!'),
  document.getElementById('container')
);

var React = require('react');
var {createRoot} = require('react-dom/client');

console.log('react version:', React.version);

const root = createRoot(document.getElementById('container'));
root.render(React.createElement('h1', null, 'Hello World!'));

使用 LiveServer打開 fixtures/packaging/webpack/dev/index.html