Nette框架手动导入Naja库运行提示naja未定义问题求助

• 核心原因1：你加载Naja用的是type="module"的ES模块脚本，ES模块有独立的作用域，默认不会将内部导出的变量暴露到全局window对象，所以你在外部普通JS文件直接访问naja自然会报未定义。
• 核心原因2：你当前的初始化代码写法存在错误：document.addEventListener('DOMContentLoaded', naja.initialize() ) 中naja.initialize()加了括号会立即执行该方法，而非将方法作为回调传给事件监听，就算naja定义正确也会出现执行时序问题。
• 额外排查点：打开浏览器开发者工具的网络面板，确认Naja.js请求状态为200，没有出现404报错，如果404需要检查你上传Naja文件的实际路径是否和src配置的{$basePath}/js/vendor/Naja.js一致。

解决方法 #

方法1：统一在模块内初始化（推荐） #

直接在加载Naja的模块脚本中完成导入和初始化，不需要依赖全局变量：

<script type="module">
  import naja from '{$basePath}/js/vendor/Naja.js';
  document.addEventListener('DOMContentLoaded', () => naja.initialize());
  // 如果有其他和Naja相关的自定义逻辑，也可以直接写在这里
</script>

如果你的自定义JS逻辑也可以改成ES模块，直接在自定义JS顶部导入Naja即可，引入自定义JS时也要加type="module"属性：

// 自定义JS文件
import naja from './vendor/Naja.js';
document.addEventListener('DOMContentLoaded', () => {
  naja.initialize();
  // 你的其他业务逻辑
});

方法2：手动挂载到全局作用域 #

如果你不想修改现有非模块的自定义JS代码，可以在加载Naja后手动将其挂载到window全局对象：

<script src="{$basePath}/js/vendor/Naja.js" type="module"></script>
<script type="module">
  import naja from '{$basePath}/js/vendor/Naja.js';
  window.naja = naja;
</script>

注意模块脚本默认异步延迟执行，你的自定义JS需要等待全局naja挂载完成后再执行，推荐将自定义JS也加上defer属性，或者将初始化逻辑放在DOMContentLoaded回调中。

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