Gulp + Browserify + Jquery + Bootstrap

Question

NPMとgulpを使用してjquery + jquery-ui + bootstrapをプロジェクト内にロードしようとしています。

私の構成はこれです：

Package.json

"browser": { 
    "jquery": "/node_modules/jquery/dist/jquery.js", 
    "jquery-ui": "/node_modules/jquery-ui-browserify/jquery-ui.js" 
}, 
"browserify-shim": { 
    "jquery": "$", 
    "jquery-ui": { 
     "exports": "jquery-ui", 
     "depends": [ "jquery:jQuery" ] 
    } 
}, 
"browserify": { 
    "transform": [ "browserify-shim" ] 
}, 
"dependencies": { 
    "bootstrap": "^3.3.6", 
    "jquery": "2.1.0", 
    "jquery-ui-browserify": "^1.11.0-pre-seelio", 
} 

gulpfile.js

gulp.task('browserify', function(){ 
    return browserify([ 
     'node_modules/jquery/dist/jquery.js', 
     'node_modules/jquery-ui-browserify/dist/jquery-ui.js', 
     'node_modules/bootstrap/dist/js/bootstrap.js', 
]) 
.bundle() 
.pipe(source('core.js')) 
.pipe(buffer()) 
.pipe(gulp.dest('build/js')); 
}); 

その後、私は私のindex.phpからasseticでのCore.jsをロードこのエラーが発生する：

Uncaught ReferenceError: jQuery is not defined 

私は間違っていますか？

ありがとうございます。

Answer 1

ここで何をしようとしているのか分かりませんが、ブラウザのインス​​タンスに渡す必要があるのは、アプリケーションのエントリポイントであり、依存関係ではありません。

次に、あなたのアプリケーションにあなたがそれらの依存関係をロードするためにrequire機能を使用することができます。

var $ = require('jquery'); 

コンパイル中browserifyが自律的にあなたのための二つのことを行います。

1. 彼はあなたのバンドルにいずれかを置きますあなたが必要とするライブラリ。
2. requireステートメントは、そのライブラリのバンドルされたコピーへの参照に置き換えて解決します。

ライブラリがnpmでインストールされている限り、追加の設定は必要ありません。一方、ライブラリが普段からない場所にある場合は、ブラウザに解決方法を伝える必要があります。

とにかく、あなたは多分 `jqueryの-browserify`は、問題を解決` NPM jqueryの-browserify --save`をインストールrepo's readme