J'utilise actuellement create-react-app
pour amorcer l'un de mes projets. En gros, j'essaie de configurer des chemins dans tsconfig.json en les ajoutant au fichier tsconfig.json par défaut généré par create-react-app:
"baseUrl": "./src",
"paths": {
"interfaces/*": [
"common/interfaces/*",
],
"components/*": [
"common/components/*",
],
},
Cependant, chaque fois que j'exécute yarn start
qui exécute en gros react-scripts start
, il supprime mes modifications et génère à nouveau les configurations par défaut.
Comment puis-je dire à create-react-app d'utiliser mes configurations personnalisées?
J'ai pu le faire en utilisant les conseils de ce numéro .
Mettez les options de configuration que les scripts doivent supprimer dans un fichier séparé (par exemple, paths.json) et les référencer depuis tsconfig.json via la directive extend.
paths.json:
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"interfaces/*": [ "common/interfaces/*"],
"components/*": [ "common/components/*"],
}
}
}
tsconfig.json
{
"extends": "./paths.json"
...rest of tsconfig.json
}
Vous ne pouvez pas et je ne sais pas quand vous pourrez le faire. J'ai essayé d'utiliser baseUrl et les chemins d'accès pour éviter les importations relatives, mais comme vous pouvez le constater, certaines valeurs sont supprimées intentionnellement. Le "(encore)" est encourageant mais (sigh) qui sait quand ils le soutiendront officiellement. Je recommande vous abonner à ce problème github / pour être averti si/lorsque cela change.
The following changes are being made to your tsconfig.json file:
- compilerOptions.baseUrl must not be set (absolute imports are not supported (yet))
- compilerOptions.paths must not be set (aliased imports are not supported)
Create React App ne prend actuellement pas en charge baseUrl
. Toutefois, il existe une solution de contournement ... pour configurer baseUrl
à la fois pour WebPack et le IDE, vous devez procéder comme suit:
.env
avec le code suivant:NODE_PATH=./
tsconfig.paths.json
avec le code suivant:{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"src/*": ["*"]
}
}
}
tsconfig.json
{
"extends": "./tsconfig.paths.json",
...
}