定义在 gulpfile.js 中的 react:modules 任务:
好处: 不需要维护模块之间的相对路径,可以更放肆地调整目录结构而不对代码产生影响
缺点: 模块必须通过唯一标识标记而不再取决与文件路径,所以必须保证不能重名,要对模块很熟悉,不然光看到一个名字,然后找不到对应的文件在哪里
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