React index-files

Aktuelle Programmier- und Auszeichnungssprachen HTML / CSS / JavaScript
, , , ,
1

Hi,
Ich beschäftige mich in letzter Zeit verstärkt mit React (& Typescript). Mein Problem das ich hab, bezieht sich dabei auf die Projektstruktur. Empfohlen wird ja (so gut wie) überall eine index-datei zu haben, welche dann nochmals die Sachen exportiert. Und genau damit hab ich meine Probleme: wie gestalte ich das elegant?!

Ich würde gerne so wenig index-dateien wie möglich anfassen müssen + natürlich möglichst wenig code dafür schreiben. Letzteres hab ich derzeit über templates in der IDE gelöst. Und IDE ist jetzt auch noch so ein Punkt. Intellij möchte immer von der Original-Datei importieren - und nicht von der index-Datei. Da es anscheinend keine Möglichkeit für module mit scope protected gibt, hab ich mir mit nameprefixes beholfen … womit ich aber auch nicht glücklich bin (also die Componente begint mit einem _ welchen ich dann beim reexport in der index-datei wieder entferne).

Kann mir wer eine Empfehlung geben, wie ich das gescheit hinbekomme?

2

Ok, ein Problem konnte ich lösen. In Intellij kann man angeben, dass man lieber directory-imports haben möchte (was sich dann auf die index.ts bezieht):

image.png1487×1119 77 KB

Hier muss das “use directory import” gecheckt sein.

Edit:
Ok, und dann kann ich eigentlich auch die index-dateien kompakt halten durch export * from:

export * from "./Greeting" ;
export * from "./I18NProvider";

Witzig. Damit schlag ich mich schon länger rum und kaum entscheidet man sich das Forum zu fragen findet man die Lösung binnen Minuten …

3

Leider habe ich Deinen Thread erst jetzt so gesehen. Genau so macht man das in der Regel. :slight_smile:

4

Jup, solch eine Empfehlung hab ich auch immer wieder gefunden. Nur haben mir halt die imports nie gefallen - welche von der IDE generiert wurden. Und da ich nicht jeden import händisch machen wollte, musste ich ein “workaround” finden. Keine Ahnung warum ich vorher nie auf die Idee kam, mal die Einstellungen von intellij durchzuschauen …

5

Weil ichs gerade refactor:

so sah meine eine index.ts vorher aus:

import { _LandingPage, _LandingPageDispatcher, _LandingPageProperties, _LandingPageState} from "./LandingPage";
export { _LandingPage as LandingPage, _LandingPageDispatcher as LandingPageDispatcher, _LandingPageProperties as LandingPageProperties, _LandingPageState as LandingPageState};

import { _AllSkillsPage, _AllSkillsPageDispatcher, _AllSkillsPageProperties, _AllSkillsPageState} from "./AllSkillsPage";
export { _AllSkillsPage as AllSkillsPage, _AllSkillsPageDispatcher as AllSkillsPageDispatcher, _AllSkillsPageProperties as AllSkillsPageProperties, _AllSkillsPageState as AllSkillsPageState};

… und so danach:

export * from "./AllSkillsPage";
export * from "./LandingPage";
6

Wofür hast Du denn da die Unterstriche? Das kenne ich so nicht. Ist das irgendein Best-Practice?

7

hatte! Die hab ich ja weg gemacht und ich gehe mal nicht von aus, dass es eine Best-Practice ist. Es war einfach nur ein verzweifelter versuch meine IDE dazu zu bekommen die imports anders zu machen (was funktioniert hat). Ich hab das eben mit FREUDEN wieder rausgeworfen. Denn der Scheiß hat nur zusätzliche Arbeit bedeutet…

8

Ich arbeite generell ohne index.ts. Ich schreibe das export immer direkt an die Klasse.

9

Mach ich jetzt auch. Hatte die nur anders exportiert:

export { Abc as _Abc};

Die index.ts mag ich deswegen, weil ich dann solche importe haben kann:

import {Header, MenuButton} from "../controls";