Typescript не может найти модули, которые импортированы с псевдонимом веб-пакета

Question

Я сейчас настраиваю свой проект, чтобы он был немного чище, особенно в части внешнего интерфейса со ссылками.

Оглядываясь назад, я заметил, что очень щедро разбираюсь в структуре папок для моих файлов внешнего интерфейса и в итогес большим количеством слоев.Вот почему я решил посмотреть, что может сделать веб-пакет для этого случая, и узнал о функциональности псевдонима.

Вот как я его настроил:

resolve: {
    alias: {
        components: path.resolve(__dirname, "Scripts/Views/Components"),
        data: path.resolve(__dirname, "Scripts/Data"),
        definitions: path.resolve(__dirname, "Scripts/Definitions"),
        helper: path.resolve(__dirname, "Scripts/Helper"),
        scripts: path.resolve(__dirname, "Scripts"),
        views: path.resolve(__dirname, "Scripts/Views"),
    },
    extensions: [".tsx", ".ts", ".js", ".jsx"],
    modules: ["node_modules"]
}

Как вы можете видетьЯ создал псевдоним для различных папок здесь.

Это моя структура папок:

Теперь давайте перейдем, например, кLoginDialog.tsx.Здесь я пытаюсь выполнить импорт следующим образом:

import { IErrorAttachedProperty } from "definitions/formHelper";

Однако все, с чем я сталкиваюсь, это ошибка, что ни один модуль не может быть найден таким образом.

Что я здесь не так делаю?

Если это имеет какое-либо значение - файл webpack.config.js находится в том же каталоге, что и папка Scripts.

Answer 1

Хорошо, поэтому, чтобы избежать путаницы с другими, я публикую свое решение / выводы:

Да, вы можете просто использовать tsconfig.json без необходимости resolve/alias в Webpack.Вы должны просто сделать это один раз с настройкой Typescript.

РЕДАКТИРОВАТЬ: Нет, оказывается, вам нужен resolve/alias раздел в webpack.config.js.Typescript будет счастлив без него, но тогда вы получите ошибки Webpack при его сборке. Выполните оба действия, чтобы заставить его работать .

СОВЕТ: Убедитесь, что пути, указанные вами в paths разделе tsconfig.json, относятся к baseUrlточка входа.Не делайте их относительно файла tsconfig.json, baseUrl подобен корню проекта для не относительных импортов модулей, определенных с paths.

Из документов Typescript, абсолютных имен модулей (импорт *от package-a) относительно baseUrl ~ https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-url

Все импорты модулей с не относительными именами предполагаются относительно baseUrl.

Относительные модули (импорт * из ./packages) только из текущего файла, как указано:

Обратите внимание, что относительный импорт модулей не влияет на установку baseUrl, поскольку они всегда разрешаются относительно их импортируемых файлов..

Итак, если у вас есть:

./packages
  ./package-a
  ./package-b
./index.ts
./tsconfig.json

Ваш tsconfig.json будет выглядеть так:

{
    "compilerOptions": {
        "baseUrl": "./packages",
        "paths": {
            "package-a/*": [ "./package-a/*" ],
        },
    },
    "include": [
        "./packages/**/*"
    ]
}

Тогда ваш webpack.config.json будет выглядеть так:

{
    resolve: {
        alias: {
            'package-a': path.resolve(__dirname, 'packages/package-a/'),
        }
    },
}

Затем вы можете импортировать из index.ts следующим образом:

import { pkgAThing } from 'package-a';
// or
import { otherPkgAThing } from 'package-a/dir/dir`;

Что является альтернативой относительному стилю:

import { pkgAThing } from './packages/package-a`;

Answer 2

вы должны настроить tsconfig.json для машинописного текста

"baseUrl": "./",
"paths": {
  "components/*": [
    "./src(or any other path)/Scripts/Views/Components"
  ]
},

вот хороший пример псевдоним ts