0
211
VistasImportación de biblioteca mecanografiada con rutas secundarias
Tengo una biblioteca Typescript que se consume desde una aplicación React. Quería importar el contenido de la biblioteca TS con rutas secundarias como
import {base} from "my-lib" import {foo} from "my-lib/path1" import {bar} from "my-lib/path2" Encontré el problema de Github que indica que Typescript aún no lo admite ( exports en package.json). Estoy usando Typescript 4.3.
Hay una solución publicada en el mismo hilo: Github repo typescript-subpath-exports-workaround . Utiliza exports y typeVersions
{ "main": "dist/index.js", "types": "dist-types/index.d.ts", "exports": { ".": "./dist/index.js", "./exported": "./dist/exported.js" }, "typesVersions": { "*": { "exported": ["dist-types/exported"] } } } Creé una nueva aplicación de reacción (a través npx create-react-app ) e intenté importar hello desde typescript-subpath-exports-workaround y funcionó bien. Pero no se pudo importar `typescript-subpath-exports-workaround/exported
import {hello} from "typescript-subpath-exports-workaround" //works fine import {foo} from "typescript-subpath-exports-workaround/exported" //gives "Module not found" errorEl error completo está a continuación:
./src/App.js Module not found: Can't resolve 'typescript-subpath-exports-workaround/exported' in '/Users/...../my-react-app/src'Código de Codesandbox - https://codesandbox.io/s/create-react-app-forked-5yxd8
ACTUALIZACIÓN: la ruta secundaria utilizada en la importación y la estructura de carpetas son diferentes. En el ejemplo anterior, no habrá una carpeta llamada path1 o path2 .
2 Respuestas
Responde la pregunta0
Como se respondió en Cómo crear un módulo local en TypeScript :
El uso del paquete module-alias podría resolver su problema.
Agregue esta configuración a continuación en package.json:
"_moduleAliases": { "my-module": "<your_build_folder>/modules/my-module" },Y este código en la primera línea.
de su archivo principal (server.ts/index.ts)
import 'module-alias/register';
0
Mire el marco Next.JS React. Puede ver que utilizan exactamente el mismo enfoque que ha descrito. Puede crear una aplicación mecanografiada simple con su herramienta CLI como esta:
npx create-next-app@latest --typescript
Luego, preste atención a las importaciones utilizadas, por ejemplo, en ./pages/index.tsx .
Luego, si observa ./node_modules/next/package.json , verá que exponen los archivos creados de dos maneras: el código real y las definiciones de tipo están dentro ./node_modules/next/dist/* y sus reexportaciones están justo en ./node_modules/next/* .
Al menos este es un ejemplo de la vida real y un buen lugar para comenzar sus experimentos. No significa que tengas que aprender todo su código base. Solo necesita imitar las partes esenciales de su archivo package.json ( https://github.com/vercel/next.js/blob/canary/packages/next/package.json ), específicamente main , types y files en su Biblioteca mecanografiada.
Actualizar
Solo mire de dónde podrían importarse las importaciones ausentes:
Como puede comprender, esos son los lugares donde se colocan los archivos *.d.ts correspondientes. Por lo tanto, solo necesita crear archivos de reexportación en la carpeta raíz de su biblioteca y mencionarlos en la propiedad 'archivos' de su lib's package.json .
La imagen exactamente similar que tengo para mi propia biblioteca.
Creo que no hay otra forma de impedir las importaciones de su lib de la manera que desee, excepto tener reexportaciones o definiciones de tipo original directamente en la carpeta raíz de la lib.