使用Laravel Mix和React进行NODE_PATH和绝对导入？

Question

我正在尝试将React应用程序组合到Laravel项目中，将我的React代码放在这里：MyLaravelProject/resources/assets/js。我想使用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应用程序文件都依赖于包含.env的NODE_PATH=js/文件来启用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

如果我更改我的import语句以使用相对路径，我可以修复此错误，但这对我的所有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=./

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

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

我是否需要将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