Webpack resolve.alias не работает с typescript?

Я пытаюсь сократить импорт в typescript

от import {Hello} from "./components/Hello";

to import {Hello} from "Hello";

Для этого я узнал, что вы можете использовать resolve.alias в webpack, поэтому я настроил эту часть следующим образом

resolve: {
    root: path.resolve(__dirname),
    alias: {
        Hello: "src/components/Hello"
    },
    extensions: ["", ".ts", ".tsx", ".js"]
},

Создается Webpack, и работает output bundle.js. Однако typescript intellisense жалуется на это cannot find the module

Итак, мой вопрос в том, работает ли webpack resolve.alias с typescript?

Я нашел следующий issue, но на него нет ответа.

Ответ 1

Если вы используете ts-loader, вам, возможно, придется синхронизировать настройки alias/resolve веб-пакета с настройками paths в вашем tsconfig.json.

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "Hello": ["src/components/Hello"]
        }
    }
}

Если вы используете awesome-typescript-loader, то веб-пакет может выяснить это автоматически из настроек paths в вашем tsconfig.json, в соответствии с состоянием этой проблемы в репозитории. Таким образом, вам не нужно дублировать ту же информацию в поле alias Webpack.

Ответ 2

Чувак, тебе не хватает одного очень важного момента в tsconfig.json: соответствующий шаблон!

Это должно быть настроено так:

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

"*" - это важная часть, указывающая TS на совпадение с правой стороной.

Я узнал об этом из этой статьи: https://medium.com/@martin_hotell/type-safe-es2015-module-import-path-aliasing-with-webpack-typescript-and-jest-fe461347e010

Ответ 3

Как уже упоминали другие, вы должны предоставить alias в вашем webpack.config.js:

    resolve: { 

        extensions: ['.ts', '.js'],
        alias: {
            forms: path.resolve(__dirname, 'src/forms/')
        } 
    },

Это должно быть в синхронизации с вашим tsconfig.json файл (BaseUrl и пути требуется).

"compilerOptions":  {
    baseUrl: "./",
    ...
    paths: {
       "forms/*": ["src/forms/*]
    }
}

Примечание. Шаблон подстановочного знака необходим для соответствия вашей конфигурации псевдонима разрешения.

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

import { FormsModule } from 'forms/my-forms/my-forms.module';

Ответ 4

Мне пришлось внести небольшую корректировку в решение Caio Saldanha, чтобы оно работало в моей среде.

Я использую Babel 7 с babel-plugin-module-resolver для разрешения псевдонимов. Нет ts-loader или awesome-typescript-loader как Babel 7 поддерживает TypeScript из коробки с помощью @babel/preset-typescript. Мне пришлось добавить дополнительную конфигурацию пути для каждого псевдонима для index.ts загрузки корня модуля (например, index.ts):

"baseUrl": ".",
"paths": {  // this must be synchronized with .babelrc.js module-resolver alias config
    "component": ["src/component/index.ts"],
    "component/*": ["src/component/*"],
    ...
}

Наличие index.ts в папке /component со следующим содержимым:

export { default as Logo } from './Logo';

Без дополнительной строки .../index.ts этот импорт не работал для меня:

import { Logo } from 'component';

Конфигурация псевдонима в .babelrc.js:

plugins: [
[
    'module-resolver',
    {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        root: ['./src'],
        alias: {
        // this must be synchronized with tsconfig.json path configuration
            component: './src/component',
        },
    },
],

Ответ 5

Я думаю, вы можете это сделать и работать так, как вы описываете:

resolve: {
    root: [
        path.resolve(__dirname),
        <path_to_components_directory> //e.g. path.resolve(__dirname, 'src', 'components')
    ], 
    extensions: ["", ".ts", ".tsx", ".js"]
},

Затем вы можете сделать import {Hello} from "Hello";

Я знаю, что делаю это, чтобы разрешить пути к файлам в моем каталоге src/js. Я не использую typescript, хотя, но я не думаю, что это повлияет на результат.