tsconfig의 electron-forge настройка 경로

7299 단어 typescriptelectron
Недавно я посмотрел библиотеку Electron и вслед за ним я стал смотреть, какие есть способы написать на нём приложение, используя 반응. этого списка я остановился на 전자 단조. Как поставить ещё typescript в свой проект описано на electron-forge (이것은 문제가 될 수 있습니다. 문제는 무엇입니까?, 문제는 무엇입니까?). У меня была 문제 - не заводились ссылочные пути в tsconfig. Вот как её решил.
У меня такая структура 카탈로고브:

В каталоге 클라이언트 находятся скрипты, касающиеся реакт-priложения: компоненты, роутер, и т.п. И вот хотелось бы делать импорт компоненты не так: import Logo from '../../../components/Logo" , по-красивее: import Logo from '@clients/components/Logo" .
Первый шаг - настроить tsconfig:

"baseUrl": "./",
"paths": {
      "@/*": [
        "src/*"
      ],
      "@client/*": [
        "src/client/*"
      ]
},



За ним следует второй шаг- настроить webpack, чтобы он тоже пониmal эти пути. Это делается в двух файлах:
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'],
  },


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

좋은 웹페이지 즐겨찾기