Недавно я посмотрел библиотеку 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'],
},
Ну вот на этом всё: цель достигнута, сокращённые названия путей работают, как хотелось бы.
Буду рад, если кому-то пригодится эта заметка.
Top comments (1)
Во-первых, Electron - это не библиотека, а фреймворк. Посмотрите в сторону Vite на замену webpack, есть готовые boilerplates, можно найти на github. PS: and also it will be way better to write articles on dev.to using English language, in order to have a feedback from devs around the Globe