jQuery Mobile，NPM和WebPack的问题 [英] Issues with jQuery Mobile, NPM, and WebPack

问题描述

我花了一段时间研究这个并进行实验，我确信我可以一起破解它以使其正常工作，但我宁愿理解 我做错了什么。

I've spent a while researching this and experimenting, and I'm sure I could hack something together to get it working but I'd rather understand what I'm doing wrong.

well < a href =https://stackoverflow.com/questions/21428993/including-jquery-mobile-in-a-node-js-project-with-browserify>已知 jQuery 移动 讨厌 玩得很好。

It's well known that jQuery Mobile hates playing nicely.

然而我看到的每个地方，罪魁祸首是一样的：jQuery Mobile有一个IIFE，它看起来像：

Yet everywhere I look, the culprit is the same: jQuery Mobile has an IIFE which looks something like:

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

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

When loaded in Node (instead of a browser), this is set incorrectly and it fails to bind the module

我安装了jQuery Mobile，如下所示：

I installed jQuery Mobile like so:

npm install --save-dev jquery-mobile

然后我尝试将它包含在我的脑中像这样的JavaScript：

I then tried including it in my JavaScript like so:

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'

注意：这与 $ 无关，或者这个上下文有什么问题。它确实在寻找Grunt之前甚至没有尝试加载jquery-mobile ......出于某种原因？

Note: This has nothing to do with $ being undefined, or anything being wrong with the this context. It literally didn't even try to load jquery-mobile before looking for Grunt... for some reason?

据我所知，在线研究并且只是基本了解NPM以及模块的布局方式， ./ node_modules / jquery-mobile 中应该有一个dist文件夹。没有这样的文件夹。

From what I can tell, researching online and just having a basic understanding of NPM and how modules are generally laid out, there should be a "dist" folder inside of ./node_modules/jquery-mobile. There is no such folder.

< img src =https://i.stack.imgur.com/EDTC8.jpgalt =jQuery Mobile directory>

它几乎看起来就像我得到了jQuery Mobile的源代码而不是编译版本。我习惯在dist文件夹中找到一个缩小的javascript文件，这里没有这样的东西。

It almost looks like I got the source code for jQuery Mobile instead of the compiled version. I'm used to finding a minified javascript file in the "dist" folder, and there's no such thing here.

基于我所看到的和错误我我到了，我试着去jQuery Mobile目录并运行 grunt 。当然我知道这是不好的做法，因为你永远不应该触摸你的 node_modules 文件夹。在任何时候， rm -rf node_modules 和 npm install 应该可以安全地将其取回。

Based on what I'm seeing and the errors I'm getting, I tried going to the jQuery Mobile directory and running grunt. Of course I know this is bad practice, because you should never touch your node_modules folder. At any point in time it should be safe to rm -rf node_modules and npm install to get it back.

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

Despite the existence of a Gruntfile.js I got the following error:

Fatal error: Unable to find local grunt.

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

So I have a non-built version of jQuery Mobile being installed by NPM and I'm unable to build it.

推荐答案

又过了一天，我回到这里并做了一些窥探我找到了问题。

After another day I came back to this and doing some snooping I found the issue.

当我跑步时：

npm install --save-dev jquery-mobile

NPM违约安装 1.5.0-alpha.1

此版本仍为alpha版本，因此默认情况下不会构建。看来，我收到的是未构建的源代码，没有 dist 文件夹。

This version is still in alpha, so it isn't built by default. As it appeared, I was receiving un-built source code with no dist folder.

还有第二个问题，虽然。将我的package.json更新为：

There's a second issue, though. Updating my package.json to:

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

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

I started getting new errors, but jQuery Mobile doesn't support jQuery 3.0 (which is installed by default upon running npm install --save-dev jquery). So I had to roll back my version of jQuery in the package.json, as well

然后还有第三个问题：每个人都经历过的常见问题。由于IIFE写得不好，Webpack和Browserify不正确地构建了jQuery Mobile。这可以通过使用 jquery-mobile-babel-compatible 或使用 imports-loader 来解决，每此StackOverflow帖子

Then there was a third issue: the common issue that everyone has experienced. Webpack and Browserify build jQuery Mobile improperly because of a poorly written IIFE. This can be solved by using jquery-mobile-babel-compatible or using imports-loader, per this StackOverflow post

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

Alternatively if you must use jQuery 3 and want to use jQuery Mobile 1.5 alpha, you can download the minified version directly from their website and include it in your app's javascript folder (instead of using NPM to manage it).

这篇关于jQuery Mobile，NPM和WebPack的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！