JavaScript > Tools
Webpack - Alias
Um große Verschachtelungen beim Zugriff auf Komponenten zu vermeiden, können bei webpack modules auch alias für Pfade eingetragen werden (webpack config > resolve > alias (https://webpack.js.org/configuration/resolve/):
const config = {
resolve: {
alias: {
components: path.resolve("src/components"),
store: path.resolve("src/store"),
utils: path.resolve("src/utils"),
backend: path.resolve("src/backend"),
},
},
}
Damit kann ein import statement u. U. deutlich verkürzt werden - z. B. statt
import MyButton from "../../../../../components/button/MyButton.jsx";
kann dies so geschrieben werden.
import MyButton from "components/button/MyButton.jsx";
Da dies nicht dem Standard Import entspricht, muss allerdings auch der Editor darauf vorbereitet werden - hier Visual Studio Code. Bei VS Code wird dies über die Datei jsconfig.json (im root Verzeichnis -> also "/jsconfig.json") eingestellt werden.
Leider ist die Konfiguration nicht so eindeutig wie erhofft - auch einzelne Einstellungen sind auf der Original-Seite (https://code.visualstudio.com/docs/languages/jsconfig) gar nicht beschrieben - nach einiger Internet-Recherche + Try-And-Error hat es mit dieser Konfiguration funktioniert:
{
"compilerOptions": {
"baseUrl": "./src/",
"jsx": "react"
}
}
(vorausgesetzt der Quellcode befindet sich auch unter "./src/"). Danach kann auch mit F12 zum Quellcode gesprungen werden ;-)