Laravel中lightgallery初始化代码移到blade后报未定义如何解决

问题原因 #

你通过ES模块import语法在app.js里导入的lightGallery属于模块内部局部变量，默认不会挂载到浏览器的window全局对象上，而dashboard.blade.php里写的JS代码是在全局作用域执行的，自然找不到未暴露的lightGallery变量。

解决方案 #

方案1：将lightGallery挂载到全局对象（最快捷） #

修改你的app.js文件，在导入lightGallery相关依赖后，手动把它挂载到window上，代码如下：

import lightGallery from 'lightgallery';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-zoom.css';
import 'lightgallery/css/lg-thumbnail.css';

// 新增以下代码，将依赖挂载到全局
window.lightGallery = lightGallery;
window.lgThumbnail = lgThumbnail;
window.lgZoom = lgZoom;

修改后重新打包前端资源（执行npm run dev或者npm run build），之后你在blade文件里就可以直接调用lightGallery初始化了。

方案2：把初始化逻辑封装到app.js暴露的方法中 #

如果不想把太多变量挂到全局污染作用域，可以在app.js里封装初始化方法，再挂到全局：

// app.js 新增代码
function initInlineGallery(containerId, customOptions = {}) {
  const defaultOptions = {
    plugins: [lgThumbnail, lgZoom],
  };
  return lightGallery(document.getElementById(containerId), Object.assign(defaultOptions, customOptions));
}
window.initInlineGallery = initInlineGallery;

然后在blade文件里直接调用方法即可：

<script>
// 要等DOM和app.js加载完成后再执行，建议把这段script放在app.js引入标签的后面
document.addEventListener('DOMContentLoaded', function() {
  initInlineGallery('inline-gallery-container', {
    // 此处填写你自定义的lightGallery配置
  });
});
</script>

注意：所有修改完成后都要重新编译前端资源，并且确保blade文件里的app.js引入标签的位置，在你写的初始化JS代码之前，避免出现依赖未加载就执行的情况。

内容的提问来源于stack exchange，提问作者user15076175