DEV Community

Stanislav Karol
Stanislav Karol

Posted on

electron-forge настройка paths в tsconfig

Недавно я посмотрел библиотеку 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/*"
      ]
},

Enter fullscreen mode Exit fullscreen mode

За ним следует второй шаг- настроить 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'],
  },
};
Enter fullscreen mode Exit fullscreen mode

webpack.renderer.config.js
Необходимо добавить точно такую же настройку:

  resolve: {
    alias: {
      '@': srcPaths('src'),
      '@client': srcPaths('src/client'),
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
  },
Enter fullscreen mode Exit fullscreen mode

Ну вот на этом всё: цель достигнута, сокращённые названия путей работают, как хотелось бы.
Буду рад, если кому-то пригодится эта заметка.

Discussion (1)

Collapse
eshimischi profile image
eshimischi • Edited on

Во-первых, 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