AMP项目中如何实现assets/js与static/js目录的函数互通复用？

DevOps 小满

2026-10-1

解决方案

核心原因是Hugo对assets目录下的JS执行js.Build构建时，默认会将函数封装在局部作用域中，不会暴露到全局环境，因此static目录下的脚本无法直接访问。按以下步骤操作即可解决：

步骤1：将需要调用的函数挂载到全局对象

修改assets/js/custom.js，把要对外暴露的方法挂载到window对象上，也可以统一挂载到自定义命名空间避免全局变量污染：

// assets/js/custom.js 示例代码
// 单个函数直接挂载
window.authCallback = function() {
  // 你的原有逻辑
}

// 多个函数推荐用统一命名空间
window.AMPProjectUtils = {
  authCallback: function() {
    // 授权回调逻辑
  },
  otherCommonFunc: function() {
    // 其他要暴露的公共方法
  }
}

如果你的custom.js用的是ES模块写法，不要仅用export导出方法，必须额外挂载到window对象才能被外部脚本访问。

步骤2：在static目录的JS中直接调用全局方法

你已经在HTML中保证了构建后的custom.js加载顺序早于static目录下的JS，直接调用即可：

// static/js/xxx.js 示例代码
// 调用单个暴露的函数
authCallback()

// 调用命名空间下的函数
AMPProjectUtils.authCallback()

如果担心极端情况的加载时序问题，可以加一层兼容判断：

if (window.AMPProjectUtils) {
  AMPProjectUtils.authCallback()
} else {
  document.addEventListener('DOMContentLoaded', () => {
    AMPProjectUtils.authCallback()
  })
}