单独运行react源码包

react版本

17版本

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

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

迁移出源码包

拷出react源码中的packages中的

修改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