0

问候，过流者！

我正在开发一个瑞士军队的构建系统（Gulp、Browserify、Bower、BrowserSync、RunSequence、Nodemon和jQuery），但试图将一个 jQuery 插件填充到构建中，而 DOM 让我难过。

如果您想自己快速重现该问题，我已经整理了一个沙盒存储库： gulp-browserify-bower-test。如果您是一个在脑海中构建应用程序的勇敢者，请继续。

我要解决的问题是：如何正确填充或要求 jQuery，以便在分布式构建中满足依赖关系而不会出现不必要的膨胀？

以下是相关文件及其相关内容：

bundle.js1.用于初始化滑块的预浏览客户端脚本：

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 shims，设置它们的导出名称和它们的依赖项：

"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 版本，用它代替 npm 版本package.json：

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

路障

请注意，我可以require('maskedinput')在我的客户端 js 中使用，但是当我尝试使用时require('nouislider')，我看到一个控制台错误，似乎说 NoUISlider 没有找到它的 jQuery 依赖项："Uncaught TypeError: Cannot read property 'fn' of undefined"尝试初始化 NoUISlider 时。

再一次，这是为轻松重现问题而设置的沙箱： gulp-browserify-bower-test

是什么赋予了？我应该如何包含 jQuery 和这些插件？

有没有更好的方法来做到这一点，或者bower两者Browserify都不是？我发现托管在几个模块上npm，并且bower构建、模块类型和一般质量往往会有所不同，所以我认为同时容纳两个包管理器是明智的。

4

1 回答 1

0

noUiSlider 扩展了 window.jQuery 或 window.Zepto。由于这些都不可用，因此扩展原型 (fn) 将不起作用。只需添加：

var jQuery = $;

应该做。

于 2014-09-26T05:59:28.360 回答