React 库如何直接请求其源库？

Question

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

我只是想知道他们是怎么做到的？我尝试通过 Grunt 查看他们的构建步骤，但看不到任何直接完成此操作的包。

有关我正在谈论的技术的更具体示例，here the library calls the flattenChildren module which exists in a different directory altogether 无需指定路径。

Answer 1

React 使用了一个名为 commoner 的工具。他们的配置匹配如下所示的行：

* @providesModule ReactChildReconciler

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

源代码以结构化的方式组织，但模块名称对于 repo 是全局唯一的（我认为是 facebook 的所有内部代码 ^{[需要引用]}）。这意味着它指向的内容没有歧义。

关于这个主题，react 的代码中还有一些其他神奇的东西。

对 invariant(assertion, explanation, ...) 的调用和类似的 warning 调用通过删除第一个参数后的参数来转换为生产构建以保存 space。警告调用被完全剥离，因为它们被包裹在下一个魔法中：仅开发块。

if (__DEV__) {
   ...
}

编译为：

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

通过 envify，编译成这个（在开发中），代码运行：

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

这在生产中：

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

缩小为：

React 库如何直接请求其源库？

How does the React library require its source libraries directly?

javascript

commonjs

reactjs