为什么本机可以找到要导入的.js文件的正确位置?

时间:2018-02-17 09:31:34

标签: react-native import

刚刚开始学习本机反应,我试图弄清楚如何运行本机项目的反应,但我对以下代码感到困惑:

import { AppRegistry, Text, TextInput, View } from 'react-native';

我假设在我的项目文件夹中应该有像Text.js和TextInput.js这样的文件,这些文件将在执行中被调用。我找到了两个,但他们在不同的位置。 Text.js位于proj_root \ node_modules \ react-native \ Libraries \ Text中,但TextInput.js位于proj_root \ node_modules \ react-native \ Libraries \ Components \ TextInput中。由于它们位于目录层次结构的不同级别,React Native的执行环境如何才能正确找到它们?从我使用的'导入'指令,我感到困惑。

非常感谢任何帮助。如果有有用的信息(书籍或网页)来实现如何使用正确的设置运行RN项目,请分享。非常感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

这都涉及如何在节点js环境中处理导出:简化,“react-native”指向“[your project's root] / node_modules / react-native”,并在该文件夹内(事实上,所有node_modules包)您会找到包含密钥package.json的{​​{1}}。

我没有特别检查“react-native”,但通常这个“main”键值是“index.js”,它指向“main” : “some-js-file.js”。在此node_modules/react-native/index.js文件中导出index.js AppRegistry等。

当然,在index.js中,它们通常在重新导出之前首先使用View导入。

Webpack非常方便处理大量这些导出并将它们编译为生产版本与开发版本,但整个想法始于require文件夹和node_modules文件,它们指向index.js 。这个index.js通常会根据环境为你的项目提供上面要求的组件,例如,如果你正在开发它,它将为你提供该组件的开发版本,其中propTypes可以在运行时记录所需的错误,或者如果你构建生产它将为您提供具有性能优势等的组件的Prod版本。

Webpack可以捆绑你的代码来创建像你在package.json文件夹中看到的那些库(例如react-native),以及不同的导出方式(例如commonjs,amd,umd,global var)但是这真的超出了这个问题的范围,如果你想创建自己的“node_module”,还需要考虑一些事项。