React 源码全局模块管理系统

最新推荐文章于 2024-09-14 19:02:05 发布

afunyusong

最新推荐文章于 2024-09-14 19:02:05 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： React Native 文章标签：源码结构 RN

本文链接：https://blog.csdn.net/afanyusong/article/details/54380060

React Native 专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨了React的全局模块系统，介绍了gulpfile.js中的react:modules任务如何编译src目录下的代码并将其扁平化，同时改变require为相对路径形式。此外还分析了ES6标准下的import语法及其实现原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

探索React源码的全局模块系统

定义在 gulpfile.js 中的 react:modules 任务：

src 目录下的代码会被编译
编译完后代码结构被扁平化
所有代码中的 require 会被转化为相对路径的形式

好处：不需要维护模块之间的相对路径，可以更放肆地调整目录结构而不对代码产生影响

缺点：模块必须通过唯一标识标记而不再取决与文件路径，所以必须保证不能重名，要对模块很熟悉，不然光看到一个名字，然后找不到对应的文件在哪里

ES6标准：
import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js路径可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

多说无益，举个栗子吧。

import React, {Component} from 'react';

我们根据上文的结论找到了react源码里的gulpfile.js 文件，如下代码所示，react模块下对外的接口文件主要包含在下面包含的路径下，

react: {
    src: [
      'src/umd/ReactUMDEntry.js',
      'src/umd/ReactWithAddonsUMDEntry.js',
      'src/umd/shims/**/*.js',

      'src/isomorphic/**/*.js',
      'src/addons/**/*.js',

      'src/ReactVersion.js',
      'src/shared/**/*.js',
      '!src/shared/vendor/**/*.js',
      '!src/**/__benchmarks__/**/*.js',
      '!src/**/__tests__/**/*.js',
      '!src/**/__mocks__/**/*.js',
    ],
    lib: 'build/node_modules/react/lib',
  }

gulpfile.js将那些目录下对外export的方法或变量做了扁平化处理。
然后经过我的仔细查找，终于在src/isomorphic/React.js找到了module.exports = React;；此文件即我们栗子中import进来的React模块，Component变量在这里，Component: ReactComponent,所以实际就是src/isomorphic/modern/class/ReactComponent.js