Exportations dans package.json

Salut. Je travaille dans une équipe dédiée à l'amélioration de l'expérience utilisateur

lorsque je travaille avec de l'argent. Nous livrons le front-end dans des packages npm.



À un moment donné, j'ai rencontré des problèmes qui m'ont amené à utiliser un

champ exports



danspackage.json

Problème n ° 1

Les packages peuvent exporter des fonctions avec le même nom mais faire des choses différentes. Prenons 2 State Managers comme exemple: Reatom et Effector.



Ils exportent la fonction createStore



. Si vous essayez de les exporter à partir d'un package (appelons-le vendors



), vous obtenez l'image suivante:

// @some/vendors/index.ts

export { createStore } from '@reatom/core';
export { createStore } from 'effector';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Il y a un conflit de noms. Ce type de code ne fonctionnera tout simplement pas.

Cela peut être évité en as



:

// @some/vendors/index.ts

export { createStore as reatomCreateStore } from '@reatom/core';
export { createStore as effectorCreateStore } from 'effector';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ça a l'air, franchement, nul. De manière amiable, chaque réexportation doit être rédigée as



pour maintenir la cohérence. Cela rend DX pire pour moi.



J'ai commencé à chercher une solution qui éviterait à la fois le conflit de noms et le besoin d'écrire as



. À quoi cela pourrait-il ressembler ... Par exemple, comme ceci:

// @some/vendors/reatom.ts

export { createStore } from 'reatom';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

// @some/vendors/effector.ts

export { createStore } from 'effector';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Dans deux fichiers différents, nous écrivons des exportations régulières et importons l'implémentation requise createStore



:

// someFile.ts

import { createStore } from 'vendors/effector';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

#2

vendors



, , -, - . , Runtypes.

exports



, :

// someFile.ts

import { createStore, Dictionary, createEvent, Record } from 'vendors';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

- . , - :

// someFile.ts

import { createStore, createEvent } from 'vendors/effector';
import { Dictionary, Record } from 'vendors/runtypes';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. .

// someFile.ts

import { createStore, createEvent } from 'vendors/state';
import { Dictionary, Record } from 'vendors/contract';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, exports



package.json

// package.json

"exports": {
  "./contract": "./build/contract.js",
  "./state": "./build/state.js",
  "./package.json": "./package.json"
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . TypeScript, .



package.json types



, , . . contract



, state



. ?



typesVersions



package.json

// package.json

"typesVersions": {
  "*": {
    "contract": ["build/contract.d.ts"],
    "state": ["build/state.d.ts"]
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, exports



, d.ts



, .

exports



vendors



. DX.



, Effector :

import { createEvent } from 'effector';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

import { createEvent } from 'effector/compat';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

exports



.

.

!