¿Cómo usar las rutas en tsconfig.json?

167

Estaba leyendo sobre el mapeo de rutas en tsconfig.jsony quería usarlo para evitar usar las siguientes rutas feas:

ingrese la descripción de la imagen aquí

La organización del proyecto es un poco extraña porque tenemos un mono-repositorio que contiene proyectos y bibliotecas. Los proyectos están agrupados por empresa y por navegador / servidor / universal.

ingrese la descripción de la imagen aquí

¿Cómo puedo configurar las rutas en tsconfig.jsonlugar de:

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

Puedo usar:

import { Something } from "lib/src/[browser/server/universal]/...";

¿Se requerirá algo más en la configuración del paquete web? o es tsconfig.jsonsuficiente?

Remo H. Jansen
fuente
1
Echa un vistazo a npmjs.com/package/tspath
Patrik Forsberg el

Respuestas:

268

Esto se puede configurar en su archivo tsconfig.json, ya que es una característica de TS.

Puedes hacer así:

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

Tenga en cuenta que la ruta a la que desea hacer referencia, toma su baseUrl como la base de la ruta a la que apunta y es obligatorio como se describe en el documento.

El carácter '@' no es obligatorio.

Después de configurarlo de esa manera, puede usarlo fácilmente de esta manera:

import { Yo } from '@config/index';

Lo único que puede notar es que el intellisense no funciona en la última versión actual, por lo que sugeriría seguir una convención de índice para importar / exportar archivos.

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

Alejandro Lora
fuente
36
Solo un comentario que podría ayudar a otros ... si está trabajando con node.js o algún entorno que no utiliza un paquete de módulos como webpack, también necesitará el módulo npmjs.com/package/module-alias
Remo H. Jansen
2
@Alejandro Lora He usado esta solución en mi proyecto, funciona de maravilla, pero cuando ejecuto ng test karma no puedo resolver las variables de entorno. ¿Cuál podría ser la razón?
Gavishiddappa Gadagi
1
Esto funciona completamente bien, pero hay un problema al habilitar la declaración e importar este módulo npm en otro módulo. Intelisense se rompe. ¿Alguna idea sobre cómo solucionar este problema?
Siva
1
@Aphax sí. es posible asignar a un solo archivo, preparé un ejemplo aquí: github.com/ialex90/TypeScript-Node-Starter/commit/…
Alejandro Lora
2
tenga en cuenta que jest-test no utiliza las rutas tsconfig: debe definir un moduleNameMapper: tsjest # 414
TmTron
14

Puede usar la combinación de baseUrly paths documentos .

Asumiendo que la raíz está en el srcdirectorio superior (y leí tu imagen correctamente) usa

// tsconfig.json
{
  "compilerOptions": {
    ...
    "rootDir": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}

Por webpackTambién podría ser necesario añadir Resolución del módulo . Para webpack2esto podría verse como

// webpack.config.js
module.exports = {
    resolve: {
        ...
        modules: [
            ...
            './src/org/global'
        ]
    }
}
mleko
fuente
12

Comprueba estas soluciones similares con asterisco

  "baseUrl": ".",
  "paths": {
    "*": [
      "node_modules/*",
      "src/types/*"
    ]
  },
AgBorkowski
fuente
7

La respuesta de Alejandros funcionó para mí, pero como estoy usando el awesome-typescript-loadercon webpack 4, también tuve que agregarlo tsconfig-paths-webpack-plugina mi archivo webpack.config para que se resuelva correctamente

James Moran
fuente
6

Si está utilizando rutas, deberá volver a cambiar las rutas absolutas a rutas relativas para que funcione después de compilar el mecanografiado en JavaScript simple usando tsc.

La solución más popular para esto ha sido tsconfig-caminos hasta ahora.

Lo he intentado, pero no me funcionó para mi configuración complicada. Además, resuelve rutas en tiempo de ejecución, lo que significa una sobrecarga en términos del tamaño de su paquete y resuelve el rendimiento.

Entonces, escribí una solución yo mismo, tscpaths .

Yo diría que es mejor en general porque reemplaza las rutas en tiempo de compilación. Significa que no hay dependencia del tiempo de ejecución ni sobrecarga de rendimiento. Es bastante simple de usar. Solo necesita agregar una línea a sus scripts de compilación package.json.

El proyecto es bastante joven, por lo que podría haber algunos problemas si su configuración es muy complicada. Funciona perfectamente para mi configuración, aunque mi configuración es bastante compleja.

Joon
fuente
3

si se está utilizando typecript + webpack 2 + at-loader, hay un paso adicional (la solución de @ mleko solo funcionaba parcialmente para mí):

// tsconfig.json
{
  "compilerOptions": {
    ...
    "rootDir": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}    

// webpack.config.js
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');

resolve: {
    plugins: [
        new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
    ]
}

Resolución de ruta avanzada en TypeScript 2.0

eeglbalazs
fuente
2

Esto funciona para mi:

 yarn add --dev tsconfig-paths

 ts-node -r tsconfig-paths/register <your-index-file>.ts

Esto carga todas las rutas en tsconfig.json. Una muestra tsconfig.json:

{
    "compilerOptions": {
        {…}
        "baseUrl": "./src",
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}

Asegúrese de tener tanto baseUrl como rutas para que esto funcione

Y luego puedes importar como:

import {AlarmIcon} from 'assets/icons'
FacePalm
fuente
1

Su tipo de ruta relativa En lugar del código siguiente

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

Podemos evitar que "../../../../../" parezca extraño y no legible también.

Entonces, el archivo de configuración de TypeScript tiene una respuesta para lo mismo. Simplemente especifique baseUrl, config se encargará de su ruta relativa.

forma de configuración: el archivo tsconfig.json agrega las siguientes propiedades.

"baseUrl": "src",
    "paths": {
      "@app/*": [ "app/*" ],
      "@env/*": [ "environments/*" ]
    }

Así que finalmente se verá a continuación

import { Something } from "@app/src/[browser/server/universal]/...";

Se ve simple, impresionante y más legible.

Vijay
fuente
1

Verifique la operación del compilador usando esto

He agregado baseUrl en el archivo para un proyecto como el siguiente:

"baseUrl": "src"

Esta funcionando bien Entonces agregue su directorio base para su proyecto.

divya_kanak
fuente
0

Parece que ha habido una actualización de React que no te permite configurarla "paths"en tsconfig.jsonningún momento.

Nicely React solo genera una advertencia:

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

luego actualiza su tsconfig.jsony elimina la "paths"sección completa para usted. Hay una manera de evitar esta carrera

npm run eject

Esto expulsará todas las create-react-scriptsconfiguraciones agregando configyscripts directorios y archivos de construcción / configuración en su proyecto. Esto también permite un mayor control sobre cómo se construye, nombra, etc., todo mediante la actualización de{project}/config/* archivos.

Luego actualice su tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./src",
        {…}
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}
Andy Braham
fuente