jQuery 移动、NPM 和 WebPack 的问题

Question

我花了一段时间对此进行研究和试验，我确信我可以将一些东西组合在一起以使其正常工作，但我宁愿了解什么我是做错了。

well known that Mobile讨厌玩得很好

然而无论我看哪里，罪魁祸首都是一样的：jQuery Mobile 有一个 IIFE，看起来像：

(function($, window){
  // code
})(jQuery, this)

在 Node（而不是浏览器）中加载时，this 设置不正确，无法绑定模块

我的问题不一样

我安装了 jQuery Mobile 是这样的：

npm install --save-dev jquery-mobile

然后我尝试将它包含在我的 JavaScript 中，如下所示：

window.$ = window.jQuery = require('jquery');
$.mobile = require('jquery-mobile');

这引发了错误：

Module not found: Error: Can't resolve 'load-grunt-config' in '/home/sbarnett/test/node_modules/jquery-mobile'

注意： 这与 $ 未定义或 this 上下文有任何问题无关。在寻找 Grunt 之前，它甚至没有尝试加载 jquery-mobile...出于某种原因？

据我所知，在网上进行了研究并且对 NPM 以及模块的一般布局有了基本的了解，./node_modules/jquery-mobile 中应该有一个 "dist" 文件夹。没有这样的文件夹。

看起来我得到的是 jQuery Mobile 的源代码，而不是编译版本。我习惯在"dist"文件夹中找到一个缩小的javascript文件，这里没有。

根据我所看到的和遇到的错误，我尝试转到 jQuery 移动目录和运行 grunt。我当然知道这是不好的做法，因为你永远不应该触摸你的 node_modules 文件夹。在任何时间点 rm -rf node_modules 和 npm install 取回它应该是安全的。

尽管存在 Gruntfile.js，但我收到以下错误：

Fatal error: Unable to find local grunt.

所以我有一个非构建版本的 jQuery Mobile 正在由 NPM 安装，我无法构建它。

Answer 1

又过了一天，我又回到这里并进行了一些窥探，我发现了这个问题。

当我运行:

npm install --save-dev jquery-mobile

NPM 默认安装 1.5.0-alpha.1

此版本仍处于 alpha 阶段，因此默认情况下并未构建。看起来，我收到的是未构建的源代码，没有 dist 文件夹。

不过还有第二个问题。将我的 package.json 更新为：

// ...
  "jquery-mobile": "^1.4.0",
// ...

我开始遇到新的错误，但是 jQuery Mobile 不支持 jQuery 3.0（默认安装在运行 npm install --save-dev jquery 上）。所以我不得不在 package.json 中回滚我的 jQuery 版本，还有

然后是第三个问题：大家都遇到过的共同问题。 Webpack 和 Browserify 构建 jQuery Mobile 不正确，因为 IIFE 写得不好。这可以通过使用 jquery-mobile-babel-compatible 或使用 imports-loader 来解决，根据 this Whosebug post

或者，如果您必须使用 jQuery 3 并且想使用 jQuery Mobile 1.5 alpha，您可以直接从他们的网站下载缩小版本并将其包含在您的应用程序中 javascript文件夹（而不是使用 NPM 来管理它）。

jQuery 移动、NPM 和 WebPack 的问题

Issues with jQuery Mobile, NPM, and WebPack

javascript

jquery

node.js

jquery-mobile

npm

我的问题不一样