阅读 72

单独运行react源码包(reach的用法)

react版本

17版本

源码存放目录不能有中文字符

当有中文字符的时候vscode执行flow.exe会失败报错

迁移出源码包

拷出react源码中的packages中的

image.png

修改webpack配置

添加别名

因为react源码中都是别名引用的,所以需要添加别名 在webpack的resolve中添加

resolve: {     alias: {       // 这样配置后 @ 可以指向 src 目录       src: resolve('src'),       react: resolve('packages/react'),       shared: resolve('packages/shared'),       'react-dom': resolve('packages/react-dom'),       'react-reconciler': resolve('packages/react-reconciler'),       'react-fetch': resolve('packages/react-fetch'),       'react-interactions': resolve('packages/react-interactions'),       scheduler: resolve('packages/scheduler'),     },     extensions: ['*', '.js', '.jsx'] }, 复制代码

添加全局变量

源码中有大量的全局变量来判断当前环境等等,需要添加

new webpack.DefinePlugin({       "__DEV__": false,       "__PROFILE__": true,       "__UMD__": true,       "__EXPERIMENTAL__": true,       "__VARIANT__": false }) 复制代码

添加flow支持

添加@babel/preset-flow 和 flow-bin

npm i --save-dev flow-bin @babel/preset-flow 复制代码

在babel.config.json中添加配置@babel/preset-flow

{   "presets": [     "@babel/preset-flow"   ] } 复制代码

修改scheduler下的文件

scheduler/index.js

export * from './src/Scheduler'; export * from './src/SchedulerHostConfig.js'; 复制代码

scheduler/src/SchedulerHostConfig.js

// throw new Error('This module must be shimmed by a specific build.'); export {   unstable_flushAllWithoutAsserting,   unstable_flushNumberOfYields,   unstable_flushExpired,   unstable_clearYields,   unstable_flushUntilNextPaint,   unstable_flushAll,   unstable_yieldValue,   unstable_advanceTime } from './forks/SchedulerHostConfig.mock.js'; export {   requestHostCallback,   requestHostTimeout,   cancelHostTimeout,   shouldYieldToHost,   getCurrentTime,   forceFrameRate,   requestPaint } from './forks/SchedulerHostConfig.default.js'; 复制代码

修改shared\invariant.js

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

修改react/index.js

添加

import ReactSharedInternals from './src/ReactSharedInternals'; export {   ReactSharedInternals as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, }; 复制代码

删除export原来的 ReactSharedInternals 解决文件相互引用的时导致的bug


作者:sunxhh
链接:https://juejin.cn/post/7028779516478619662


文章分类
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐