[英]Laravel Mix BrowserSync reloading
我正在將 Laravel Mix 與 React 一起使用。 我已經配置了 BrowserSync 在 850 毫秒后重新加載reloadDelay: 850
但有時 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'
]
});
我創建了一個適用於瀏覽器同步版本 2.26.7 的設置。 我還發現非常有用的是文檔的這一部分,即瀏覽器同步食譜。 您實際上只需輸入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 應用程序與 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上打開您的瀏覽器,當您保存更改時,您的瀏覽器應重新加載。
注意!! 當您在http://my-site.local/
上打開瀏覽器選項卡時,我無法使實時重新加載工作,但是如果我打開http://my-site.local:3000
實時重新加載就像一個魅力。
快樂編碼 =)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.