Question

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

我们的应用程序使用jQuery和一些jQuery插件。对于这篇文章，我将使用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的“全局”实例，但这似乎并不重要。

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'
    })
  ]

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

绝对是我的智慧结束了，因为我不是Webpack专业版，所有移动部件都很难调试。

任何帮助都将不胜感激。

Answer 1

使用多个jquery版本或不同的js frameworks ::

var jq13 = jQuery.noConflict(false);

或

var jq13 = $.noConflict(false);

or 

var jq13 = $.noConflict();

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

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

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

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

我希望此代码可以帮助您。因为$用于引用JQuery和大多数js框架和插件。如果我们使用多个版本的jquery或js框架$ get覆盖到最后加载的js。

Answer 2

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

本地和生产行为不同，因为生产在部署时始终运行yarn install。（我最近在本地运行它，但发现自己使用npm install来更新包）。在一次有趣的追逐中，我发现尽管存在yarn.lock，但纱线会在yarn install运行时随时覆盖它。它的行为与我正常的锁定理念不同。

所以，长话短说：我的yarn.lock文件中出现了一些问题。我相信更新的软件包可能存在问题，但在将锁文件恢复到之前正在进行的提交之后，我能够运行yarn install并使事情正常工作。

我个人肯定有些愚蠢，但我认为纱线使用锁定文件的方式完全出乎意料，值得分享。

通过Webpack

2 个答案: