Циркулярные зависимости с импортом модулей узлов с использованием Browserify и React

Question

Я просто понял, что у меня есть круговые зависимости в моих модулях. (cjsx стенды для кофе + JSX)

У меня есть файл index.cjsx, который содержит следующее:

modules = 
    App: require('./App') 
    Code: require('../../components/elements/code/Code') 
    Icon: require('./icon/Icon') 
    Page: require('./page/Page') 
    Toolbar: require('./toolbar/Toolbar') 
    Toolbars: require('./toolbar/Toolbars') 
    Wysiwyg: require('./wysiwyg/Wysiwyg') 

console.log modules 
module.exports = modules 

Тогда, по моему заявлению, я использую следующий синтаксис:

{ Icon, Toolbar, Toolbars } = require '../index' 

index.cjsx здесь, чтобы разрешить этот синтаксис и не требовать от каждого модуля отдельно.

Но теперь я столкнулся с проблемой, когда для моего компонента App требуется файл index, а для моего index файла требуется App. Существует циклическая зависимость. Это не вызывает ошибки, но в какой-то момент все усложняется, потому что теперь, когда мне нужно index в некотором компоненте, я получаю пустой объект {}.

Когда я добавить журналы в Wysiwyg, я вижу следующее:

script.js:197 Object {}// The object is empty, console.log require '../index' (in Wysiwyg) 
script.js:90 Object {App: Object}// The object is not empty here and contains everything I need. (console.log modules, in index.cjsx) 
script.js:209 undefined undefined 
script.js:45151 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Wysiwyg`. 

Похоже, мой индекс на самом деле загружается после того, как оно было необходимо. Интересно, могу ли я что-то сделать, чтобы исправить это, или если я должен потребовать каждый пакет отдельно от самого компонента. Спасибо за вход :)

---

Я исправил проблему, не требуя от индекса компонента App (который является хозяином и находится в корневом каталоге. И, не перечисляя компонент App в индексном файле.

Answer 1

вы должны использовать файл index.js, чтобы требовать только файлы в текущей папке. Таким образом, вы избегаете циклических зависимостей, если вы правильно управляете своими папками. В вашем примере вы должны добавить index.cjsx в панель папок, например, с помощью только Toolbar и Toolbars, а затем до

{ Toolbar, Toolbars } = require './toolbar' 

Примечание: вы можете опустить индексный файл, предполагается, что если вы поместите путь к папке