自定义jQuery克隆模块_k未定义报错：外部JS无法访问问题排查

问题原因 #

你用type="module"引入kquery模块，但ES模块默认拥有独立作用域，不会将内部变量自动暴露到全局window对象中。而你的main.js是普通脚本，运行在全局作用域，自然找不到_k变量。

解决方案 #

方法1：修改Rollup配置，打包为全局变量格式 #

调整Rollup的输出配置，将模块打包成**立即执行函数(IIFE)**格式，自动把_k挂载到全局。

在rollup.config.js中修改output配置：

export default {
  input: 'src/lib/index.js',
  output: {
    file: 'dist/kquery.browser.min.js',
    format: 'iife', // 指定输出为IIFE格式，适合浏览器全局变量
    name: '_k', // 设置全局变量名
    minifyInternalExports: true,
    sourcemap: true
  }
};

重新打包后，_k会自动成为window的属性，普通脚本main.js就能直接访问。

方法2：在模块源码中手动挂载全局变量 #

如果不想修改Rollup配置，可以在kquery的入口文件末尾添加代码，手动将_k挂载到window：

// 假设你的kquery核心对象是_k，在模块最后添加
if (typeof window !== 'undefined') {
  window._k = _k;
}

这样即使以ES模块方式引入，_k也会被暴露到全局。

方法3：将main.js改为ES模块 #

把main.js改成ES模块，通过import引入_k：

1. 修改HTML中的脚本标签：

<script type="module" src="./main.js"></script>

2. 在main.js开头导入_k：

// 注意替换为正确的CDN或本地路径
import _k from 'https://cdn.jsdelivr.net/gh/Neyunse/kquery/dist/kquery.browser.min.js';

_k().load(() => {
  // 后续代码保持不变
});

额外注意事项 #

你的main.js中存在语法错误，需要修正：

• 模板字符串里的_k{tag}应该改为${tag}
• _k{r.title}和_k{r.description}要改为${r.title}、${r.description}

修正后的示例片段：

const r = await _k().remote(`https://api.sampleapis.com/coffee/${tag}`).get();
r.map(r => {
  _k('#coffe').insertHTML(`<li><b>${r.title}:</b> ${r.description}</li>`);
});

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