typescript - sourcemap - ¿Cómo usar las rutas en tsconfig.json?
typescript lib es7 (11)
Comprueba estas soluciones similares con asterisco
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*",
"src/types/*"
]
},
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
?
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''
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.
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
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
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/*" ]
}
},
}
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''
]
}
}
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.
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
/
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.
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 } */)
]
}
/
comienza solo desde la raíz, para obtener la ruta relativa que deberíamos usar
./
o
../