Question

我正在关注开始使用Browserify Getting Started with Browserify这个简短的教程。尽管遵循了一切，但是当捆绑时，jquery并不在页面上工作，即。我下面的app.js代码中的按钮元素未附加到正文。检查了我能想到的所有使用chrome dev工具的东西，以确保所有正在加载正确。这是bundle.js加载正常，我的app.js中的jquery代码在其中。 alert（）和console.log（）输出也很好，所以我知道jQuery被特别忽略了。尝试将jquery版本更改为教程版本，但仍然无法正常工作。我知道jQuery代码本身很好，因为它可以在我直接在索引页面上添加代码并直接链接到node_modules目录中的jquery.js时起作用。任何想法可能是什么问题？提前感谢！

app.js

var $ = require('jquery')
alert("hi from app.js") // this appears in browser on page load

// none of this jQuery currently works using Browserify
var button = $('<button/>').html('click me').on('click', function() {
alert("hi from browserify!")
})
$('body').append(button)

console.log("where is jQuery code ....."); // this logs in dev console

的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Browserify Test with jQuery</title>
    <script src="bundle.js" charset="UTF-8"></script>
<!--<script src="node_modules/jquery/dist/jquery.js"></script>-->
  </head>
  <body>
  <!--<script>
    var button = $("<button/>").html("click me").on("click", function() {
    alert("hi from browserify!")
    })
   $("body").append(button)
  </script>-->
</body>
</html>

以下是Browserify创建的bundle.js文件中显示的代码。

......// rest of bundle.js 
},{}],2:[function(require,module,exports){
var $ = require('jquery')
alert("hi from app.js")

var button = $('<button/>').html('click me').on('click', function() {
alert("hi from browserify!")
})
$('body').append(button)

console.log("where is jQuery code .....");

},{"jquery":1}]},{},[2]);

package.js

{
"name": "browserify-test",
"version": "1.0.0",
"description": "Testing Browserify",
"main": "index.js",
"scripts": {
  "build": "browserify app.js -o bundle.js",
  "watch": "watchify app.js -o bundle.js"
},
"author": "MikeM",
"license": "ISC",
"devDependencies": {
"browserify": "^10.2.3",
"jshint": "^2.8.0",
"watchify": "^3.2.1"
},
"dependencies": {
  "jquery": "^2.1.4"
}
}

Answer 1

尝试将var $ = require('jquery')更改为global.jQuery = require('jquery')。这会将它附加到全局对象，即浏览器中的窗口。

Answer 2

我建议进行更改的通用综合：尝试改变：

window.jQuery = require('jquery');
window.$ = global.jQuery;

Answer 3

我有同样的问题。当DOM没有准备好时，我会在头部加载bundle.js。尝试将代码包装在$（function（）{... // code here ...}）中，或将bundle.js移到body的末尾。

jquery出现在browserify bundle.js中，但不在浏览器中工作

3 个答案: