electron-forge настройка paths в tsconfig
Stanislav Karol
Posted on May 8, 2022
Недавно я посмотрел библиотеку Electron и вслед за ним я стал смотреть, какие есть способы написать на нём приложение, используя react. Из этого списка я остановился на electron-forge. Как поставить ещё typescript в свой проект описано на electron-forge (пока идёт перечисление ссылок, проблем нет, всё идёт прозрачно и понятно, верно?). У меня была проблема- не заводились ссылочные пути в tsconfig. Вот как её решил.
У меня такая структура каталогов:
В каталоге client находятся скрипты, касающиеся реакт-приложения: компоненты, роутер, и т.п. И вот хотелось бы делать импорт компоненты не так: import Logo from '../../../components/Logo"
, а по-красивее: import Logo from '@clients/components/Logo"
.
Первый шаг - настроить tsconfig:
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
],
"@client/*": [
"src/client/*"
]
},
За ним следует второй шаг- настроить webpack, чтобы он тоже понимал эти пути. Это делается в двух файлах:
webpack.main.config.js
const path = require('path');
function srcPaths(src) {
return path.join(__dirname, src);
}
module.exports = {
/**
* This is the main entry point for your application, it's the first file
* that runs in the main process.
*/
entry: './src/index.ts',
// Put your normal webpack config below here
module: {
rules: require('./webpack.rules'),
},
resolve: {
alias: {
'@': srcPaths('src'),
'@client': srcPaths('src/client'),
},
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
},
};
webpack.renderer.config.js
Необходимо добавить точно такую же настройку:
resolve: {
alias: {
'@': srcPaths('src'),
'@client': srcPaths('src/client'),
},
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
},
Ну вот на этом всё: цель достигнута, сокращённые названия путей работают, как хотелось бы.
Буду рад, если кому-то пригодится эта заметка.
Posted on May 8, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
May 21, 2024
August 10, 2023