React库如何直接需要其源库?

时间:2015-02-21 09:47:04

标签: javascript reactjs commonjs

我正在查看Facebook的React的源代码,并发现在整个项目源中,他们没有指定加载自己的模块的相对路径。例如,代替执行var foo = require('../bar/foobar'),库使用var foo = require('foobar'),就像模块已加载到node_modules已经为CommonJS读取一样。

我只是想知道他们是怎么做到的?我尝试通过Grunt查看他们的构建步骤,但看不到任何直接完成此任务的软件包。

对于我正在谈论的技术的更具体的例子,here库调用different directory altogether中存在的flattenChildren模块而不指定路径。

1 个答案:

答案 0 :(得分:11)

React使用名为commoner的工具。它们的配置匹配如下所示的行:

* @providesModule ReactChildReconciler

require('ReactChildReconciler')次来电。他们还将所有内容放在一个目录中,因此路径最终为require('./ReactChildReconciler')

源代码以结构化的方式组织,但模块名称对于repo是全球唯一的(我认为所有facebook的内部代码都是如此) [citation needed] )。这意味着它所指出的内容毫不含糊。


关于这个问题,反应代码中还有其他一些神奇的东西。

invariant(assertion, explanation, ...)和类似warning调用的调用通过删除第一个之后的参数来转换为生成版本以节省空间。警告调用完全被剥离,因为它们被包裹在下一个魔法中:开发仅阻止。

if (__DEV__) {
   ...
}

编译为:

if (process.env.NODE_ENV !== 'production') {
   ...
}

通过envify,编译到这个(开发中),代码运行:

if ('development' !== 'production') {
   ...
}

这在生产中:

if ('production' !== 'production') {
   ...
}

这对此更加敏感: