0

こんにちは、オーバーフルビアン！

私は Swiss Army ビルド システム ( 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.jsonjQuery および 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 shimに魔法をかけ、エクスポートされた名前と依存関係を設定します。

"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.jsbrowserify 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')ください"Uncaught TypeError: Cannot read property 'fn' of undefined".

繰り返しになりますが、問題を簡単に再現できるように設定されたサンドボックスは次のとおりです: gulp-browserify-bower-test

何を与える？jQuery とこれらのプラグインをどのように含める必要がありますか?

bowerどちらか、または両方でこれを行うより良い方法はありますBrowserifyか? でホストされているいくつかのモジュールを見つけnpm、bowerビルド、モジュールの種類、および一般的な品質が異なる傾向にあったため、両方のパッケージ マネージャーに対応することが賢明であると考えました。

4

1 に答える 1