ES6 + jQuery + Bootstrap - Uncaught ReferenceError: jQuery ist nicht definiert?

Question

Wie kann ich jQuery als Abhängigkeit für den Bootstrap in ES6 importieren?

Ich habe versucht, mit:

import {$,jQuery} from 'jquery'; 
import bootstrap from 'bootstrap'; 

Aber ich bekomme immer diese Fehlermeldung:

transition.js:59 Uncaught ReferenceError: jQuery is not defined

dem aus auf diese Datei verweist:

/* ======================================================================== 
* Bootstrap: transition.js v3.3.7 
* http://getbootstrap.com/javascript/#transitions 
* ======================================================================== 
* Copyright 2011-2016 Twitter, Inc. 
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
* ======================================================================== */ 


+function ($) { 
    'use strict'; 

    // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/) 
    // ============================================================ 

    function transitionEnd() { 
    var el = document.createElement('bootstrap') 

    var transEndEventNames = { 
     WebkitTransition : 'webkitTransitionEnd', 
     MozTransition : 'transitionend', 
     OTransition  : 'oTransitionEnd otransitionend', 
     transition  : 'transitionend' 
    } 

    for (var name in transEndEventNames) { 
     if (el.style[name] !== undefined) { 
     return { end: transEndEventNames[name] } 
     } 
    } 

    return false // explicit for ie8 ( ._.) 
    } 

    // http://blog.alexmaccaw.com/css-transitions 
    $.fn.emulateTransitionEnd = function (duration) { 
    var called = false 
    var $el = this 
    $(this).one('bsTransitionEnd', function() { called = true }) 
    var callback = function() { if (!called) $($el).trigger($.support.transition.end) } 
    setTimeout(callback, duration) 
    return this 
    } 

    $(function() { 
    $.support.transition = transitionEnd() 

    if (!$.support.transition) return 

    $.event.special.bsTransitionEnd = { 
     bindType: $.support.transition.end, 
     delegateType: $.support.transition.end, 
     handle: function (e) { 
     if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments) 
     } 
    } 
    }) 

}(jQuery); 

Irgendwelche Ideen?

EDIT:

meine schluck Datei:

var gulp = require('gulp'); 
var browserify = require('browserify'); 
var babelify = require('babelify'); 
var source = require('vinyl-source-stream'); 
var gutil = require('gulp-util'); 

gulp.task('es6', function() { 
    browserify({ 
     entries: 'js/app.js', 
     debug: true 
    }) 
    .transform(babelify, { presets: ['es2015'] }) 
    .on('error',gutil.log) 
    .bundle() 
    .on('error',gutil.log) 
    .pipe(source('compile.js')) 
    .pipe(gulp.dest('js')); 
}); 

gulp.task('default', ['es6']); 

EDIT 2:

package.json:

{ 
    "name": "es6", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-preset-es2015": "^6.16.0", 
    "babelify": "^7.3.0", 
    "browserify": "^13.1.0", 
    "gulp": "^3.9.1", 
    "gulp-uglify": "^2.0.0", 
    "gulp-util": "^3.0.7", 
    "pump": "^1.0.1", 
    "vinyl-source-stream": "^1.1.0" 
    }, 
    "browser": { 
    "jquery": "./node_modules/jquery/dist/jquery.js", 
    }, 
    "browserify-shim": { 
    "jquery": "$", // or change it to jQuery 
    }, 
    "browserify": { 
    "transform": [ 
     "browserify-shim" 
    ] 
    } 
} 

Fehler:

Starting 'build'... events.js:160 throw er; // Unhandled 'error' event ^

Error: SyntaxError: Unexpected token } in JSON at position 526 while parsing json file

Answer 1

Im Allgemeinen auf eine Standardvariable belichten die Destrukturierung Sie in das tun import ist nicht richtig, da das $ oder jQuery Objekt das wichtigste ist:

import $ from 'jquery'; 

// or 
import jQuery from 'jquery' 

In Ihrem Fall handelt es sich um ein Modul (boostrap-transition), das jQuery im globalen Gültigkeitsbereich verwenden möchte. Ich hatte vor einiger Zeit ein ähnliches Problem mit dem materialize Modul auf diesem Ding.

Wenn Sie webpack verwenden, können Sie @galkowskit Antwortschritte folgen.
Falls Sie browserify stattdessen verwenden, was Sie brauchen, ist ein browserify transform als Folge ist:

"browser": { 
    "jquery": "./node_modules/jquery/dist/jquery.js", 
}, 
"browserify-shim": { 
    "jquery": "$", // or change it to jQuery 
}, 
"browserify": { 
    "transform": [ 
    "browserify-shim" 
    ] 
} 

Sie können Ihre package.json Datei setzen diese im Inneren: wenn Gulp es Ihre package.json zur Konfiguration lesen anrufen browserify wird Tipps und führen Sie diese Shim für jQuery.

Answer 2

In Webpack in der Regel I (webpack.config.js) verwenden:

externals: { 
    jquery: "jQuery" 
} 

Und dann:

import jQuery from 'jQuery'; 

Sie könnten auch versuchen:

import * as jQuery from 'jQuery'; 

Answer 3

Wenn Sie curley Konsole verwenden In es6 sagen Sie, dass Sie nur dieses Segment von Severa wollen l Segment dieses Modul kehrt zurück. JQuery nur eine Sache aussetzen, so dass Sie tun können: import $ from 'jquery'; Oder import jQuery from 'jquery'; Es wird immer

Answer 4

import jQuery from 'jquery'; 

oder

import $ from 'jquery'; 

Answer 5

Ich habe es versucht answer und es hat funktioniert.

// webpack.config.js 
 
module.exports = { 
 
    ... 
 
    plugins: [ 
 
     new webpack.ProvidePlugin({ 
 
      $: "jquery", 
 
      jQuery: "jquery" 
 
     }) 
 
    ] 
 
};