设置 Laravel 5.4 以使用 React

IT技术 laravel reactjs webpack gulp
2021-04-28 15:11:34

我不是 Laravel 的新手,而是 JavaScript 框架的新手。

我想在 laravel 构建中使用 React,但找不到有关如何执行此操作的任何信息。

我有 Laravel 5.4。我知道这预装了 Vue 和 Laravel Mix 而不是 Gulp。

我正在关注这里的教程:https : //blog.tighten.co/adding-react-components-to-a-laravel-app但这不适用于 5.4。它提到需要更新 gulpfile 但是,由于 Laravel 5.4 不使用 Gulp,所以没有!

有人可以帮忙提供一个小教程或我需要复制的几个步骤,以便让 React 在 5.4 中工作吗?

我在谷歌上搜索过,但只能找到 NPM 链接,这没什么用!

2个回答

感谢 Joe 指出我需要的文档部分。还有更多内容,因此将在下面描述我的步骤以帮助其他人。

  1. 删除node_modules文件夹。这对于全新的构建来说不是必需的,但是如果您遵循了任何其他教程并安装了不需要的东西,这将省去一些麻烦。如果您没有node_modules文件夹,请忽略此步骤。

    请注意,上述步骤将删除您使用 NPM 安装的任何内容。

  2. npm install从您的项目根目录运行这将安装 Laravel 使用的所有 NPM 组件。

  3. 打开webpack.mix.js和更改:

    mix.js('resources/assets/js/app.js', 'public/js') 
        .sass('resources/assets/sass/app.scss', 'public/css');
    

    mix.react('resources/assets/js/app.js', 'public/js')
        .sass('resources/assets/sass/app.scss', 'public/css');
    
  4. 运行npm run dev以编译上述问题中包含的课程中的 Javascript。你的 React JS 输出现在应该可以工作了。

  5. (可选)用于npm run watch即时编译。

我真的希望这能帮助其他人,就像它对我的帮助一样!

根据文档,React 支持内置于 Mix:

Mix 可以自动安装 React 支持所需的 Babel 插件。首先,用 mix.react() 替换你的 mix.js() 调用:

mix.react('resources/assets/js/app.jsx', 'public/js');

在幕后,Mix 将下载并包含适当的 babel-preset-react Babel 插件。

我不是 100% 确定这是否会自动将 React 包含在您的输出包中 - 我的猜测是否定的(在这种情况下,您必须使用普通mix.js()调用将其拉入)。