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';
!