我对整个 browserify 很陌生。
我一直在尝试使用 browserify + reactify + gulp 来转换、缩小和组合 React 应用程序。
只要我有一个React.createClass 和一个module.exports = MyComponent，一切正常。
由于我在同一个文件中物理托管了多个共享组件并在项目之间重复使用，因此我想导出多个组件。
我试过一个数组：
module.exports = [Component1, Component2]
并且还尝试了具有多个属性的对象：
module.exports = {Comp1: Componenet1, Comp2: Component2} 并且还尝试在对象中内联对 createClass 的调用，但这没有帮助。
有没有办法做到这一点，还是我必须将每个组件拆分到一个单独的 JSX 文件中？
【问题讨论】：
标签： reactjs gulp browserify
您可以这样做，将 index.js 文件放入您的 /components/ 文件夹
import Users from './Users/Users';
import User from './Users/User';
module.exports = {
User,
Users
}
import { Users, User } from './components';
如您所见，我将文件命名为 index.js，它阻止我将其写入导入声明中。如果你想用 index.js 以外的其他名称命名你的文件，你必须在导入中写下文件的名称，Node 不会猜到它！ ^^
【讨论】：
我已将多个组件放在一个文件中，并按照您的建议导出对象。
module.exports = {
comp1: Component1,
comp2: Component2
}
然后在哪里使用它们
var comp1 = require('your/path/to/components').comp1;
var comp2 = require('your/path/to/components').comp2;
【讨论】：
定义函数
function sum(a, b) {
return a + b
}
function sub(a, b) {
return a - b
}
function mul(a, b) {
return a * b
}
定义导出
export { sum, sub, mul }
你需要的导入函数
import { sum, sub } from 'myfile'
或所有功能
import * as myfunctions from 'myfile'
并调用为
sum(1+1) 或 myfunctions.sum(1+1)
源代码：https://flaviocopes.com/how-to-export-multiple-functions-javascript/
【讨论】：
我使用函数返回组件。
module.exports = {
comp1: function(){
return Component1;
}
}
然后
var myCompontents = require('./components');
var comp1 = myComponents.comp1();
【讨论】：
module.exports = {Component1} 对于进口商和出口商来说都更简单。
以下内容对我有用。
在单个文件MultipleComponents.js 中，添加两个或更多组件，如下所示。
const ComponentA = () => <div>Component A works! </div>
const ComponentB = () => <div>Component B works! </div>
export {ComponentA, ComponentB} // Export this way without using default
现在将这些组件导入您希望如下所示的任何其他组件中
import {ComponentA} from 'your/directory/MutlipleFiles;
【讨论】：
我是新手，我也遇到过这种情况。这就是我克服它的方法。
除了这个问题，它还回答了以下错误：
在“./index.js”中找不到导出“默认”（导入为“db”）（可能的导出：auth、db）。
第一种方法 - 使用导出默认值并且在导入时不要解构
index.js
const db = // module 1;
const auth = // module 2;
export default { db, auth}; // notice the default keyword here
在其他文件中导入时
import db from "./index.js"
第二种方法 - 在导入时使用导出和解构
index.js
const db = // module 1;
const auth = // module 2;
export { db, auth};
在导入时
import { db } from "./index.js"
请注意在使用 import 语句时何时使用解构
【讨论】：
您可以简单地将多个组件导出为一个数组：
module.exports = [Component1, Component2]
然后使用组件：
var MyComponents = require('your/path/to/components');
var Component1 = MyComponents[0];
var Component2 = MyComponents[1];
【讨论】：
var Component1 = MyComponents.Component1;var Component2 = MyComponents.Component2;