在 react 中导入和导出模块

Question

我在一个 React.js 项目中工作，我需要在其他项目中导入一些 JavaScript，还有一些我必须导出它。

例如我有

A.js

需要一些图书馆：

var EventEmitter = require('EventEmitter');
var React = require('react');
//some code here
//some function definition
var fun = function(){...}
module.exports = fun;

然后我还有另一个

B.js

，它不仅需要库，还需要我自己的 JavaScript。例如

B.js

（我想两者都在同一个文件夹中）：

var fun = require('./B.js');
var React = require('react');
//some other code here

我尝试使用库 requirejs 并尝试使用 npm 和 nodejs，但我不确定它是如何工作的。 我正在使用 flux-chat 示例

Answer 1

首先，如果您为

A.js

和

B.js

指定的代码不适合您，那是因为您试图在自身内部要求

B.js

...我认为您正在尝试做的是要求

A.js

变成

B.js

像这样：

B.js

修复：

var fun = require('./A.js');
var React = require('react');
//some other code here

注意

fun

现在需要

A.js

如果我在上面注意到的错字没有解决您的问题，请继续阅读...

---

当你需要

A.js

到

B.js

时，你到底想做什么？

如果我不知道更多你想要完成的事情（或者直到我看到你的

A.js

和

B.js

文件中的实际代码），我最好的答案是：

A.js

看起来像：

module.exports = function(){
    fun: function(param){...logic here...}
}

B.js

看起来像这样：

var React = require('react');
var A = require('./B.js');

var Whatever = React.createClass({
    render: function() {
        return (
            <div>
                {A.fun('param value')}
            </div>
        );
    }
});

另一方面，如果您尝试将

A.js

导出为 React 组件，您可以将其添加到另一个 (

B.js

) React 组件......我的答案会有所不同。

Answer 2

RequireJS 和 npm 是两种不同的模块解析方式。人们经常使用

bower

下载 AMD/UMD 支持的库，并将路径添加到 RequireJS 的配置文件中。 RequireJS 为您解决依赖关系。

我建议你使用 npm 和 webpack 来管理你的模块。他们也有很多文件。

假设您要创建一个单页应用程序。当您使用 npm 安装 lib 时，它会从 npm 注册表下载到本地磁盘中的 node_modules 中。你如何在你的html中指出

node_modules/

文件夹的路径？答案是你不能。 Webpack 为您完成任务。

Webpack 将所有 javascript 文件和必要的依赖项（本地 node_modules 中的文件）捆绑到一个大文件中。然后你可以在你的html中设置

<script src="...">

的路径。