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

typescript lib es7

Question

Estaba leyendo sobre path-mapping de tsconfig.json en tsconfig.json y quería usarlo para evitar usar las siguientes rutas feas:

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.

¿Cómo puedo configurar las rutas en tsconfig.json para que en lugar 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 suficiente con tsconfig.json ?

Answer 1

Comprueba estas soluciones similares con asterisco

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

Answer 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''

Answer 3

Esto se puede configurar en su archivo tsconfig.json, ya que es una función 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.

path-mapping

ACTUALIZACIÓN Mira este ejemplo que hice para mostrar cómo se mapea en un solo archivo:

https://github.com/ialex90/TypeScript-Node-Starter/commit/a4e8cc1f8f8d5176e0099e05b51f97b0ef4bebea

Answer 4

La respuesta de Alejandros funcionó para mí, pero como estoy usando el awesome-typescript-loader con webpack 4, también tuve que agregar el complemento tsconfig-paths-webpack-plugin a mi archivo webpack.config para que se resuelva correctamente

Answer 5

Parece que ha habido una actualización de React que no le permite establecer las "paths" en tsconfig.json anylonger.

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 tu tsconfig.json y elimina la sección completa de "paths" por ti. Hay una manera de evitar esta carrera

npm run eject

Esto expulsará todas las configuraciones de create-react-scripts al agregar directorios de config y scripts y construir / configurar archivos en su proyecto. Esto también permite un mayor control sobre cómo se construye todo, se nombra, etc., al actualizar los archivos {project}/config/* .

Luego actualice su tsconfig.json

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

Answer 6

Puede usar la combinación de baseUrl y paths docs .

Asumiendo que la raíz está en el directorio src superior (y leí su imagen correctamente) use

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

Para el webpack es posible que también deba agregar la resolución del módulo . Para webpack2 esto podría verse así

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

Answer 7

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-paths 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 en 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.

Answer 8

Si no me equivoco, ./ significa comenzar desde el directorio actual del archivo mientras que / significa comenzar desde la raíz. Por lo tanto, puede reemplazar todos los ../ al principio con un /

Answer 9

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.

Por lo tanto, el archivo de configuración de Documentscript tiene la misma respuesta. 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.

Answer 10

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

Answer 11

/ comienza solo desde la raíz, para obtener la ruta relativa que deberíamos usar ./ o ../