Exportaciones en package.json

Hola. Trabajo en un equipo dedicado a mejorar la experiencia del usuario

cuando trabajo con dinero. Entregamos el front-end en paquetes npm.



En alg煤n momento, encontr茅 problemas que me llevaron a usar un

campo exports



enpackage.json









Problema # 1



Los paquetes pueden exportar funciones con el mismo nombre pero hacer cosas diferentes. Tomemos como ejemplo a 2 administradores estatales: Reatom y Effector.



Exportan la funci贸n createStore



. Si intenta exportarlos desde un paquete (llam茅moslo vendors



), obtendr谩 la siguiente imagen:







// @some/vendors/index.ts

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





Hay un conflicto de nombres. Este tipo de c贸digo simplemente no funcionar谩.







Esto puede evitarse mediante as



:







// @some/vendors/index.ts

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





Francamente, se ve p茅simo. De manera amistosa, cada reexportaci贸n debe escribirse as



para mantener la coherencia. Esto hace que DX sea peor para m铆.



Comenc茅 a buscar una soluci贸n que evitara tanto el conflicto de nombres como la necesidad de escribir as



. 驴C贸mo podr铆a verse ... Por ejemplo, as铆:







// @some/vendors/reatom.ts

export { createStore } from 'reatom';
      
      





// @some/vendors/effector.ts

export { createStore } from 'effector';
      
      





En dos archivos diferentes, escribimos exportaciones regulares e importamos la implementaci贸n requerida 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



.

.







!








All Articles