Laravel Mix 和 React 的 NODE_PATH 和绝对导入？

Question

我正在尝试通过将我的 React 代码放在这里：MyLaravelProject/resources/assets/js 来将 React 应用程序组合到 Laravel 项目中。我想使用Laravel Mix 来生成使用npm run dev 的React 开发版本。

我的webpack.mix.js 文件：

let mix = require('laravel-mix');
mix.react('resources/assets/js/index.js', 'public/js');

我的index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import Root from 'Root';
import App from 'components/App';

ReactDOM.render(
  <Root>
    <BrowserRouter>
        <Route path='/' component={App} />
    </BrowserRouter>
  </Root>,
  document.querySelector('#root')
);

我的问题是我所有的 React 应用程序文件都依赖于包含 NODE_PATH=js/ 的 .env 文件来启用 absolute imports。当我运行npm run dev 时出现此错误：

ERROR in ./resources/assets/js/index.js
Module not found: Error: Can't resolve 'Root' in '/Users/MyUser/MyLaravelProject/resources/assets/js'
 @ ./resources/assets/js/index.js 4:0-24
 @ multi ./resources/assets/js/index.js

ERROR in ./resources/assets/js/index.js
Module not found: Error: Can't resolve 'components/App' in '/Users/MyUser/MyLaravelProject/resources/assets/js'
 @ ./resources/assets/js/index.js 5:0-33
 @ multi ./resources/assets/js/index.js

如果我将导入语句更改为使用相对路径，我可以修复此错误，但对我的所有 React 文件执行此操作会很头疼。

import Root from './Root;
import App from './components/App;

我已尝试对.env 进行以下更改，但无济于事：
1) NODE_PATH=resources/assets/js/
2) NODE_PATH=./
3) MIX_NODE_PATH=resources/assets/js/
4)MIX_NODE_PATH=./

我还尝试通过添加 NODE_PATH=./ 来更改 package.json 开发脚本。

这些都不会改变错误消息，所以我的问题似乎是我在webpack.mix.js 中定义的路径既是起始 React 应用程序文件又是绝对路径。

我需要将我的 React 应用文件中的所有路径都更改为相对路径还是有更简单的方法？

Answer 1

我发现以下在我的 Laravel/React 场景中运行良好。

将此添加到您的 webpack.mix.js 文件中

mix.webpackConfig({
    resolve: {
        extensions: [".js", ".jsx"],
        alias: {
            "@": __dirname + "/resources/assets/js"
        }
    }
});

现在你的导入变成了

import Root from '@/Root';
import App from '@/components/App';

希望这会有所帮助。

特别感谢Kaz Gosho