jQuery 插件在通过 Webpack 加载时产生 'not a function' 错误

Question

我最近在 Rails 应用程序的混乱 JavaScript 目录中领导实施了 Webpack。除非有要求，否则我不会提供背景故事，但这是一个反复出现的问题，我还没有找到好的解决方案：

我们的应用程序使用 jQuery 和一些 jQuery 插件。对于这个 post，我将使用 Froala Editor 作为示例。 (https://www.froala.com/wysiwyg-editor)

问题的最简短描述是：加载调用 froalaEditor 的页面时，我们收到错误 Uncaught TypeError: n(...).find(...).froalaEditor is not a function 并在加载后尝试访问插件会产生类似的错误。

很明显该页面没有正确加载 Froala。经过一些记录和调试后，它似乎像 Froala 模块导入 jQuery 并附加到 $ 的那个实例，但是当我们的应用程序导入时被覆盖jQuery 明确。

就文件结构和尝试的解决方案而言，我们目前有一个主 js 文件，其中包含我们的 TextEditor 模块作为依赖项。在 TextEditor 模块中，我们 require('froala-editor').

我尝试过使用 imports-loader 强制 Froala 使用 jQuery 的 'global' 实例，但这似乎并不重要。

module.exports = {
  test: require.resolve('froala-editor/js/froala_editor.pkgd.min.js'),
  use: [{
    loader: 'imports-loader?define=>false,exports=>false,jQuery=>jquery,$=>jquery,jquery=>jquery'
  }]
}

我试过使用 ProvidePlugin:

plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      jquery: 'jquery'
    })
  ]

同样有趣的是，环境似乎会改变结果。我想这只是加载时间问题，但如果我直接 require('froala-editor') 在我们的主 js 文件中，问题似乎在本地消失，但在生产中仍然存在问题。

我对这件事完全束手无策，而且由于我不是 Webpack 专家，所以所有的移动部件都让调试变得非常困难。

如有任何帮助，我们将不胜感激。

Answer 1

要使用多个jquery版本或不同的js框架::

var jq13 = jQuery.noConflict(false);

或

var jq13 = $.noConflict(false);

or 

var jq13 = $.noConflict();

并在语句中使用引用 jquery 的差异版本而不是 $ 或 jQuery 的变量 ::

jq13('#id').hide();

如果代码块使用 $ 并且您不想更改代码将 $ 作为参数传递给函数作为 ::

jq13(function($){
$('#id').hide();
 });

希望这段代码对你有所帮助。由于 $ 用于引用 JQuery 和大多数 js 框架和插件。如果我们使用多个版本的 jquery 或 js 框架 $ 将被覆盖为最后加载的 js。

Answer 2

为了帮助可能遇到这个（非常具体的）问题的其他人...

本地和生产的行为不同，因为生产在部署时始终运行ning yarn install。（我最近在本地运行它，但发现自己使用 npm install 来更新包）。在一个有趣的追逐过程中，我发现尽管存在 yarn.lock，yarn 会在 yarn install 为运行的任何时候覆盖它。它与我通常认为的锁不太一样。

所以，长话短说：我的 yarn.lock 文件中有些东西歪斜了。我相信更新的包可能有问题，但是在将锁定文件恢复到以前工作的提交后，我能够运行 yarn install 并且一切正常。

我确实有些愚蠢，但我认为 yarn 使用锁文件的方式完全出乎意料，值得分享。

jQuery 插件在通过 Webpack 加载时产生 'not a function' 错误

jQuery plugins create 'not a function' error when loaded via Webpack

javascript

jquery

webpack-2