关于引入 Foundation 发生 $(...).foundation is not a function

此篇文章中使用的 Foundation v6.3.1

先给你解决方案，只要把

$(() => $(document).foundation());

改为

$(() => {
   let a = document.createElement("script");
   document.body.appendChild(a);
   a.innerHTML = "$(document).foundation();";
});

即可解决

---

使用本人开发的自动化 web 手脚架，只是会根据目录结构和文件前缀自动引入文件到 webpack 中而已。只要看文件就好。

出错的位置

在全局模块 main.js 中写入 Foundation 初始化方法

$(() => $(document).foundation());

在此之前已经引入的 Foundation 模块

启动 webpack 开发服务器，进入页面打开控制台查看。

这意味着 Foundation 的方法没有插入到 jQuery 中。而且无法执行就意味着 Foundation 需要使用到 javascript 的部分失效了。

解决方法

在外部模块中使用的 jQuery 对象无论 Foundation 是否加载都是没有插入方法的原始对象。

那么我在页面中写入 js 使用的 jQuery 对象会加载了 Foundation 方法吗

改为插入 script 节点和直接写在页面中效果都是一样的。运行后不再报错。

那么只要把

$(() => $(document).foundation());

改为

$(() => {
   let a = document.createElement("script");
   document.body.appendChild(a);
   a.innerHTML = "$(document).foundation();";
});

就可以解决了