我正在使用Laravel Mix和React。我已经配置了850毫秒reloadDelay: 850
之后重新加载BrowserSync,但是有时Webpack编译我的所有JS文件要花费850毫秒以上的时间。在所有文件完成编译之前,我的页面已重新加载,因此我必须每次手动刷新页面。
除了reloadDelay
选项以外,是否有任何方法可以配置Laravel Mix,使其仅在编译完成后重新加载?我不想进一步增加我的reloadDelay
值。
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.browserSync({
proxy: 'http://127.0.0.1:8000',
reloadDelay: 850,
files: [
'resources/js/**/*.js'
]
});
答案 0 :(得分:0)
我创建了一个与浏览器同步2.26.7版一起使用的设置。我还发现非常有用的一点是文档的这一部分browser sync recipes。您实际上只需输入browser-sync recipe {recipe-name}
。
即browser-sync recipe webpack.react-transform-hmr
鉴于您在计算机上全局安装了browser-sync
。
mix.browserSync({
watch: true,
files: [
'public/js/**/*',
'public/css/**/*',
'public/**/*.+(html|php)',
'resources/views/**/*.php'
],
open: "http://my-site.local/",
browser: "google chrome",
reloadDelay: 1000,
proxy: {
target: "http://my-site.local/",
ws: true,
},
});
下面有完整的代码片段,说明我如何将React App与Laravel Nova连接(我使用Laravel Nova,因此我的文件路径看起来有些不同)
const mix = require('laravel-mix');
require('laravel-mix-imagemin');
// Copy and Convert images
mix.copy('resources/images', 'public/images')
.imagemin('images/**/*');
// Compile and Copy css custom style files
mix.sass('resources/sass/form.scss', 'public/css')
.minify('public/css/form.css');
mix.sass('resources/sass/main.scss', 'public/css')
.minify('public/css/main.css');
mix.sass('resources/sass/nav.scss', 'public/css')
.minify('public/css/nav.css');
// Copy css vendor files
mix.copy('resources/css/vendor/bootstrap-grid.min.css', 'public/css/vendor');
mix.copy('resources/css/vendor/normalize.css', 'public/css/vendor')
.minify('public/css/vendor/normalize.css');
// Copy js vendor files
mix.copy('resources/js/vendor/modernizr-3.8.0.min.js', 'public/js/vendor');
mix.copy('resources/js/vendor/jquery-3.5.1.slim.min.js', 'public/js/vendor');
mix.copy('resources/js/vendor/jquery-3.4.1.min.js', 'public/js/vendor');
// Compile react
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.browserSync({
watch: true,
files: [
'public/js/**/*',
'public/css/**/*',
'public/**/*.+(html|php)',
'resources/views/**/*.php'
],
open: "http://my-site.local/",
browser: "google chrome",
reloadDelay: 1000,
proxy: {
target: "http://my-site.local/",
ws: true,
},
});
这将在http://localhost:3000上打开浏览器,并且当您保存更改时,浏览器应重新加载。
NB !!!当您在http://my-site.local/
上打开浏览器选项卡时,我无法进行实时重新加载,但是,如果我打开http://my-site.local:3000
,实时重新加载就像一个超级按钮。
快乐编码=)