在Foundation 6 Zurb模板中使用npm包jquery.alphanum报jQuery未定义错误

嘿，我碰到过好多次这种老jQuery插件在模块化打包环境里的坑，本质上就是插件找不到全局的jQuery变量——毕竟Foundation 6.4.3用的是模块化构建方式（比如Webpack），默认情况下jQuery不会暴露成全局的window.jQuery，而jquery.alphanum这类老插件还在依赖全局的jQuery引用。

下面给你几个靠谱的解决办法，按顺序试试：

1. 手动暴露jQuery为全局变量 #

在你的app.js最开头，先导入jQuery并把它挂载到window对象上，这样插件就能顺利找到它了：

// 先导入jQuery
import $ from 'jquery';
// 把jQuery暴露成全局变量，适配老插件的依赖逻辑
window.jQuery = window.$ = $;

// 现在再导入jquery.alphanum
import 'jquery.alphanum';

如果习惯用require语法，也可以这么写：

const $ = require('jquery');
window.jQuery = window.$ = $;
require('jquery.alphanum');

2. 直接把jQuery传给插件（适配支持CommonJS的版本） #

有些jQuery插件支持直接传入jQuery实例，不用依赖全局变量，你可以试试这种写法：

import $ from 'jquery';
// 手动把jQuery实例传给插件初始化
require('jquery.alphanum')($);

3. 配置Webpack自动注入jQuery #

如果你的项目用Webpack构建，还可以在webpack.config.js里配置ProvidePlugin，让Webpack自动在每个模块里注入jQuery，省去手动暴露的步骤：

const webpack = require('webpack');

module.exports = {
  // ...其他已有的配置项
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

配置完记得重启Webpack服务，这样修改才会生效。

4. 如果你是直接复制插件代码到项目里 #

要是你没通过npm安装，而是直接把jquery.alphanum.js的内容复制到项目文件里，那一定要确保这段插件代码是在jQuery加载完成之后执行的。比如把插件代码包裹成一个接收jQuery参数的自执行函数：

import $ from 'jquery';

// 插件代码开始
(function($) {
  // 这里粘贴jquery.alphanum的原代码
})(jQuery);
// 插件代码结束

最后再确认一下：你已经通过npm install jquery jquery.alphanum --save安装了这两个包吧？虽然Foundation自带jQuery，但有时候版本不一致也可能出问题，最好明确安装并锁定版本。

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