Разрешение пути модуля Typescript не работает для файлов .js - PullRequest
Новая
       7

Разрешение пути модуля Typescript не работает для файлов .js

0 голосов
/ 03 декабря 2018

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

// inside app.tsx
import Main from 'Components/main'; // works if main is a .tsx file but not .js

Я получаю эту ошибку

Модуль не найден: Ошибка: не удается разрешить 'Components / main'

Это работает, если я это сделаю ./components/main.js, но я хочу использовать псевдонимы.

webpack.config.js 

resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
        alias: {
            Components: path.resolve(__dirname, '/app/components/'),
    },
},
rules: [
    {
        test: /\.ts|.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,

    },
    {
        test: /\.js$/,
        exclude: /node_modules/,
            use: [
                'thread-loader',
                { loader: 'babel-loader'}
            ],
        },
    },
//... other loaders
]

...

tsconfig.json 

{
"compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "removeComments": true,
    "baseUrl": ".",
    "sourceMap": true,
    "paths": {
        "App": ["app"],
        "Components/*": ["app/components/*"],
    }
},
"include": [
    "./app/"
],
"exclude": [
    "./node_modules/"
]}

Было бы здорово, если бы я мог использовать машинописьПсевдоним пути с JS-файлами.Я установил для allowJS значение true в файле tsconfig.json, но все равно ничего хорошего.

1 Ответ

0 голосов
/ 12 декабря 2018

Я исправил это, используя два загрузчика для файлов Typescript в веб-пакете. 

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: [
        'thread-loader',
        { loader: 'babel-loader'}
    ],
},
{
    test: /\.ts(x?)$/,
    exclude: /node_modules/,
    use: [
        {
            loader: 'thread-loader',
        },
        {
            loader: 'babel-loader',
        },
        {
            loader: 'ts-loader',
            options: {
                happyPackMode: true,
            }
        },
    ],
},
...