如何通过browserify-shim初始化包含的jQuery插件（noUISlider）？

时间：2014-09-23 02:24:44

标签： jquery bower gulp browserify nouislider

问候，Overfluvians！

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

如果您想快速为自己重现问题，我已经整理了一个沙箱回购： gulp-browserify-bower-test 。如果你是一个勇敢的灵魂谁在你脑海中构建应用程序，请继续。

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

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

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": {
  "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"
}

我也尝试过使用bower版本的jquery，用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依赖：尝试初始化NoUISlider时"Uncaught TypeError: Cannot read property 'fn' of undefined"。

再一次，这里设置的沙箱可以轻松复制问题： gulp-browserify-bower-test

是什么给出的？我应该如何包含jQuery和这些插件？

是否有更好的方法可以使用bower或Browserify而不是两者同时执行此操作？我发现在npm和bower上托管了几个模块，其中构建，模块类型和一般质量往往会有所不同，所以我认为容纳两个包管理器都是明智的。

1 个答案:

答案 0 :(得分：0)

noUiSlider扩展window.jQuery或window.Zepto。由于这些都不可用，扩展原型（fn）不会起作用。只需添加：

var jQuery = $;

应该这样做。

相关问题
最新问题