【发布时间】：2014-11-17 02:49:39
【问题描述】：
你好，Overfluvians！
我正在开发一个瑞士军队构建系统（Gulp、Browserify、Bower、BrowserSync、RunSequence、Nodemon 和 jQuery），但试图获得一个 jQuery插件填充到构建中，DOM 让我很难过。
如果您想自己快速重现该问题，我已经整理了一个沙盒存储库：gulp-browserify-bower-test。如果您是一个在脑海中构建应用程序的勇敢者，请继续。
我要解决的问题是：我如何正确地填充或要求 jQuery 以便在分布式构建中满足依赖关系而不会出现不必要的膨胀？ p>
以下是相关文件及其相关内容：
1。用于初始化滑块的预浏览客户端脚本bundle.js：
var $ = require('jquery')
var maskedinput = require('maskedinput')
function maskInputs() {
return $('input#zip').mask('99999')
}
maskInputs()
var nouislider = require('nouislider')
function initSlider() {
return $('div#slider').noUISlider()
}
initSlider()
2。包含要初始化的滑块元素的页面index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NoUISlider Gulp Demo</title>
</head>
<body>
<div id="nouislider"></div>
<input type="tel" id="zip">
<script src="/dist/js/all.js"></script>
</body>
</html>
3。 bower.json 引入了 jQuery 和 jQuery 插件
"dependencies": {
"jquery": "~2.1.1", // not sure if need jquery via bower or not
"jquery.maskedinput": "~1.3.1",
"nouislider": "~7.0.7"
}
4。 package.json 将模块巫术化为 browserify 垫片，设置它们的导出名称和依赖关系：
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"jquery": "./node_modules/jquery/dist/jquery.js",
"maskedinput": "./bower_components/jquery.maskedinput/jquery.maskedinput.min.js",
"nouislider": "./bower_components/nouislider/distribute/jquery.nouislider.all.min.js"
},
"browserify-shim": {
"jquery": "global:jQuery",
"maskedinput": {
"exports": "maskedinput",
"depends": [ "jquery:$" ]
},
"nouislider": {
"exports": "nouislider",
"depends": [ "jquery:$" ]
}
},
"dependencies": {
"jquery": "~2.1.1"
},
"devDependencies": {
"browserify": "^5.11.0",
"browserify-shim": "^3.6.0",
"gulp": "^3.7.0",
"vinyl-source-stream": "^1.0.0"
}
我也尝试过使用 jquery 的 bower 版本，将其替换为 package.json 中的 npm 版本：
==== try this ====
"jquery": "./bower_components/jquery/lib/jquery.js",
==== or this ====
"jquery": "./node_modules/jquery/dist/jquery.js",
5。 gulpfile.js 包含 browserify gulp 任务：
var gulp = require('gulp')
var browserify = require('browserify')
var stream = require('vinyl-source-stream')
gulp.task('browserify', function(){
return browserify('bundle.js')
.bundle()
.pipe(stream('all.js'))
.pipe(gulp.dest('./'))
})
gulp.task('default', ['browserify'])
障碍
请注意，我可以在我的客户端 js 中使用 require('maskedinput')，但是当我尝试使用 require('nouislider') 时，我看到一个控制台错误，似乎说 NoUISlider 没有找到它的 jQuery 依赖项："Uncaught TypeError: Cannot read property 'fn' of undefined" when正在尝试初始化 NoUISlider。
再一次，为了方便重现问题，这里设置了沙盒：gulp-browserify-bower-test
什么给了？我应该如何包含 jQuery 和这些插件？
有没有更好的方法来使用bower 或Browserify 但不能同时使用两者？我发现在 npm 和 bower 上托管的几个模块的构建、模块类型和一般质量往往会有所不同，所以我认为同时容纳这两个包管理器是明智的。
【问题讨论】：
-
我可以通过 Grunt 告诉你我是怎么做的吗？
-
你试过不填充 jquery 吗？如果通过 npm 安装，则 package.json 的
browser部分中不需要 shim 或别名。 -
$ = require('jquery')是否意味着 jQuery 不能作为window.jQuery使用？ -
window.jQuery = $ = require('jquery') 将确保得到你想要的
-
@IanLim 很高兴看到您如何使用 Grunt 做到这一点。我会尝试将 jQuery 附加到
window，尽管我认为 browserify-shim 已经在全局命名空间中提供了它（来自 package.json）："browserify-shim": { "jquery": "global:jQuery"
标签： jquery bower gulp browserify nouislider