设置Laravel 5.4以使用React

Question

我不是Laravel的新手,但我是JavaScript框架的新手.

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

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

我在这里遵循教程:https://blog.tighten.co/adding-react-components-to-a-laravel-app但这不适用于5.4.它提到需要更新gulp文件,但是,由于Laravel 5.4不使用Gulp,因此没有一个!

有人可以请一个小教程或我需要复制的几个步骤,以使React在5.4中工作吗？

我用谷歌搜索但只能找到NPM链接,这些链接不太有用!

Answer 1

感谢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用于动态编译.

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

Answer 2

根据文档,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()调用将其拉入).