Zurb Template Foundation 6 上使用的 npm jquery.alphanum 问题（未定义 jQuery）

Question

我在尝试将 jQuery 插件 jquery.alphanum 与 Foundation 6.4.3 Zurb 模板一起使用时遇到问题。

我可以将大多数 npm 包添加到我的项目 via npm instal [packagename]，然后通过（例如）import swal from 'sweetalert2'; 将它们包含在我的 app.js 中

但是对于 jquery.alphanum，无论我如何将它添加到我的项目中，我总是在控制台上收到相同的错误消息：

Uncaught ReferenceError: jQuery is not defined

我尝试通过 npm 添加它，将 jquery.alphanum.js 文件复制到我的 src 存档中并通过 <script> 标签链接它，通过 cloudflare CDN 链接它，我总是得到同样的错误。

我在 alphanum js 中可能存在一些错误，所以我尝试在我的项目之外创建一个简单的 index.html 文件，链接到 jQuery 和 alphanum CDN，它可以工作。它也适用于 jQuery 和 alpahnum 的下载副本。

最后，如果我在我的 app.js 之后链接到 jQuery CDN 和 alphanum CDN 或本地，它可以工作。

我有点难过...

在控制台上，jQuery实际上定义为jQuery331058191784730210581

和错误：

未捕获的 ReferenceError：未定义 jQuery
在 Object._typeof (app.js:22584)
在 webpack_require (app.js:20)
在 Object.defineProperty.value (app.js:14577)
在 webpack_require (app.js:20)
在对象。 (app.js:23159)
在 webpack_require (app.js:20)
在 _typeof (app.js:66)
在 app.js:69

Here is a link to a GitHub repo with the brand new Foundation project with only jquery.alphanum added.

Answer 1

我找到了答案。这与从 Foundation 6.3 到 6.3 的更改有关。

The full answer is written by Urs Bram in the Foundation forums

问题是依赖于全局变量（如 $ 或 this 是窗口对象）的模块。 Foundation 6.4 中的更改使某些插件的加载方式变得混乱。

Imports Loader 必须添加到您的项目中，并且相应的 JS 插件不起作用。然后可以像这样导入：

require("imports-loader?$=jquery!./example.js");

然后对你的 gulfile.babel.js 文件做一个小改动：

let webpackConfig = {
  resolve: {
alias: {
    jquery: "jquery/src/jquery"
  }
 },
  module: {
rules: [
  {
    test: /.js$/,
    use: [
      {
        loader: 'babel-loader'
      }
    ]
  }
]}};

希望这对某人有所帮助。