网站建设相关资料文件,兴宁房产网,个人网站域名备案流程,对网站主要功能界面进行赏析配置React源码本地调试环境
本次环境构建采用了node版本为16、react-scripts 版本号为 3.4.4#xff0c;源码下载地址 react源码调试: react源码调试环境
使用 create-react-app 脚手架创建项目
npx create-react-app react-test
进入刚刚下载的目录#xff0c;弹射 crea…配置React源码本地调试环境
本次环境构建采用了node版本为16、react-scripts 版本号为 3.4.4源码下载地址 react源码调试: react源码调试环境
使用 create-react-app 脚手架创建项目
npx create-react-app react-test
进入刚刚下载的目录弹射 create-react-app 脚手架内部配置
// 在 npm run eject 之前手动将项目 package.json 里面 react-scripts 版本号改为低版本的 3.4.4删除 node_modules 后重装确保使用老版本脚手架
npm run eject
克隆 react 官方源码 (在项目的根目录下进行克隆)
git clone --branch v16.13.1 --depth1 https://github.com/facebook/react.git src/react
接着链接本地源码
// 文件位置: react-test/config/webpack.config.js
resolve: {alias: {react-native: react-native-web,react: path.resolve(__dirname, ../src/react/packages/react),react-dom: path.resolve(__dirname, ../src/react/packages/react-dom),shared: path.resolve(__dirname, ../src/react/packages/shared),react-reconciler: path.resolve(__dirname, ../src/react/packages/react-reconciler),legacy-events: path.resolve(__dirname, ../src/react/packages/legacy-events),scheduler/tracing: path.resolve(__dirname, ../src/react/packages/scheduler/src/Tracing)}
}
修改环境变量
// 文件位置: react-test/config/env.js
const stringified {process.env: Object.keys(raw).reduce((env, key) {env[key] JSON.stringify(raw[key])return env}, {}),__DEV__: true,SharedArrayBuffer: true,spyOnDev: true,spyOnDevAndProd: true,spyOnProd: true,__PROFILE__: true,__UMD__: true,__EXPERIMENTAL__: true,__VARIANT__: true,gate: true,trustedTypes: true}
告诉 babel 在转换代码时忽略类型检查
安装npm install babel/plugin-transform-flow-strip-types -D
// 文件位置: react-test/config/webpack.config.js [babel-loader]
找到 loader: require.resolve(babel-loader),
plugins: [ require.resolve(babel/plugin-transform-flow-strip-types),
]
导出 HostConfig
// 文件位置: /react/packages/react-reconciler/src/ReactFiberHostConfig.jsexport * from ./forks/ReactFiberHostConfig.dom;
- invariant(false, This module must be shimmed by a specific renderer.);
修改 ReactSharedInternals.js 文件
// 文件位置: /react/packages/shared/ReactSharedInternals.js
- import * as React from react;
- const ReactSharedInternals React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;import ReactSharedInternals from ../react/src/ReactSharedInternals;
关闭 eslint 扩展
// 文件位置: react/.eslingrc.js [module.exports]
// 注释 extends
- extends: [
- fbjs,
- prettier
-]
禁止 invariant 报错
// 文件位置: /react/packages/shared/invariant.js
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 源码文件夹中新建 .eslintrc.json 并添加如下配置
{extends: react-app,globals: {SharedArrayBuffer: true,spyOnDev: true,spyOnDevAndProd: true,spyOnProd: true,__PROFILE__: true,__UMD__: true,__EXPERIMENTAL__: true,__VARIANT__: true,gate: true,trustedTypes: true}
}
修改 项目中index.js app.jsreact react-dom 引入方式
import * as React from react
import * as ReactDOM from react-dom
解决 vsCode 中 flow 报错
// vscode设置
javascript.validate.enable: false
可选项配置
// 如果你的 vscode 编辑器安装了 prettier 插件并且在保存 react 源码文件时右下角出现如下错误按照如下步骤解决
// 全局安装 prettier
npm i prettier -g
// 配置 prettier path
Settings Extensions Prettier Prettier path
解决__DEV__ 报错
删除 node_modules 文件夹执行 npm install
