Laravel Mix + Typescript tsconfig.json 资源/js 配置的别名不起作用

Question

我有一个 Laravel 8 项目，我正在使用打字稿。我无法使 resources.js 的根目录的别名正常工作。这是我遇到的错误：

ERROR in ./resources/js/components/TestComponent/test.tsx 65:16-34
Module not found: Error: Can't resolve 'helpers' in '/Users/codenathan/code/demo/resources/js/components/TestComponent'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx"]'?

ERROR in ./resources/js/components/TestComponent/test.tsx 66:30-72
Module not found: Error: Can't resolve 'components/TestComponent2/test2' in '/Users/codenathan/code/demo/resources/js/components/TestComponent'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx"]'?

ERROR in /Users/codenathan/code/demo/resources/js/components/TestComponent/test.tsx
./resources/js/components/TestComponent/test.tsx 2:31-40
[tsl] ERROR in /Users/codenathan/code/demo/resources/js/components/TestComponent/test.tsx(2,32)
      TS2307: Cannot find module 'helpers' or its corresponding type declarations.

ERROR in /Users/codenathan/code/demo/resources/js/components/TestComponent/test.tsx
./resources/js/components/TestComponent/test.tsx 3:27-60
[tsl] ERROR in /Users/codenathan/code/demo/resources/js/components/TestComponent/test.tsx(3,28)
      TS2307: Cannot find module 'components/TestComponent2/test2' or its corresponding type declarations.

这就是我的 webpack.mix.js 到目前为止的样子，没有组件别名，所有 tsx 文件都无法识别：

const mix = require('laravel-mix');
const path = require('path');

mix.alias({
        '@': path.resolve('resources/js'),
})

mix.js('resources/js/app.js', 'public/js')
    .ts('resources/js/components/TestComponent/test.tsx', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]).react();

我的 tsconfig.json

{
    "compilerOptions": {
        "outDir": "lib",
        "sourceMap": true,
        "noImplicitAny": false,
        "module": "commonjs",
        "lib": [
            "dom",
            "dom.iterable"
        ],
        "downlevelIteration": true,
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "resolveJsonModule": true,
        "baseUrl": ".",
        "paths": {
           "*": ["resources/js"],
        }
    },
    "include": [
        "./resources/js/**/*.ts",
        "./resources/js/**/*.tsx",
    ]
}

这是我的resources/js下的文件夹结构

.
├── app.js
├── bootstrap.js
├── components
│   ├── TestComponent
│   │   └── test.tsx
│   └── TestComponent2
│       └── test2.tsx
└── helpers.ts

测试组件

import React, { useState } from 'react';
import { incrementCount } from 'helpers';
import TestComponent2 from 'components/TestComponent2/test2';

interface TestComponentProps {
    initialCount: number;
}

const TestComponent: React.FC<TestComponentProps> = ({ initialCount }) => {
    const [count, setCount] = useState(initialCount);

    const handleButtonClick = () => {
        setCount(incrementCount(count));
    };

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={handleButtonClick}>Increment</button>
            <TestComponent2 message="Hello from TestComponent2" /> {/* Use TestComponent2 */}
        </div>
    );
};

export default TestComponent;

这是测试组件 2

import React from 'react';

interface TestComponent2Props {
    message: string;
}

const TestComponent2: React.FC<TestComponent2Props> = ({ message }) => {
    return (
        <div>
            <h2>{message}</h2>
        </div>
    );
};

export default TestComponent2;

export const incrementCount = (count: number): number => {
    return count + 1;
};

任何人都可以知道为什么 tsconfig.json 中的别名或 resouces/js 根目录的 laravel mix.alias 不起作用？

我不：

想要为组件文件夹设置别名。我希望所有文件都与根“resources/js”相关，我什至不介意使用 @ 别名，但这也不起作用

是的，我需要将此组件放在单独的 js 文件中，而不是 app.js / app.tsx

我尝试通过多种方式更改 tsconfig.json 文件和 webpack.mix.js 文件，但我无法让它工作

Answer 1

我最终做到了这一点并且成功了：

mix.alias({
'helpers': path.resolve(__dirname, 'resources/js/helpers'),
'components' : path.resolve(__dirname, 'resources/js/components'),
})

我仍然不确定为什么它不会从

tsconfig.json

读取根路径