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应用程序文件都依赖于包含.env的{{1}}文件来启用absolute imports。运行NODE_PATH=js/时出现此错误：

npm run dev

如果我将import语句更改为使用相对路径，则可以解决此错误，但是要对所有React文件执行此操作会很麻烦。

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 Root from './Root; import App from './components/App;进行以下更改无济于事：
1）.env
2）NODE_PATH=resources/assets/js/
3）NODE_PATH=./
4）MIX_NODE_PATH=resources/assets/js/

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

这些都不改变错误消息，所以我的问题似乎是我在NODE_PATH=./中定义的路径既是启动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

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

1 个答案: