在反应中导入和导出模块

Posted 2023-02-24

【中文标题】在反应中导入和导出模块

【英文标题】：importing and exporting modules in react

【发布时间】：2015-12-21 11:16:13

【问题描述】：

我在一个 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 example

【问题讨论】：

你的问题是你如何构建你的 JavaScript 服务？

【参考方案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 组件中......我的答案会有所不同。

【参考方案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="...">的路径。