React 源码全局模块管理系统

前端之家收集整理的这篇文章主要介绍了React 源码全局模块管理系统前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

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

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

多说无益,举个栗子吧。

import React,{Component} from 'react';

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

@H_301_34@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

原文链接:https://www.f2er.com/react/305028.html

猜你在找的React相关文章