React 源码全局模块管理系统

探索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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!