ES6 + jQuery + Bootstrap - 未捕獲ReferenceError：jQuery沒有定義？

Question

如何導入jQuery作爲ES6中引導的依賴關係？

我試着用：

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

但我總是得到這樣的錯誤：

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

指向此文件：

/* ======================================================================== 
* 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); 

任何想法？

編輯：

我一飲而盡文件：

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

編輯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" 
    ] 
    } 
} 

錯誤：

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

總體結構破壞你在幹什麼import是不正確的，因爲$或jQuery對象是主要的：

import $ from 'jquery'; 

// or 
import jQuery from 'jquery' 

在你的情況下，你正在處理一個模塊（boostrap-transition），它希望在全局範圍內使用jQuery。 前段時間我也有類似的問題，materialize模塊也在這件事上。

如果您使用的是webpack，則可以按照@galkowskit回答步驟操作。
如果您正在使用browserify相反，你需要的是一個browserify transform爲如下：

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

你可以把這個你package.json文件中：當咕嘟咕嘟會調用browserify它會讀取你的package.json進行配置提示併爲jQuery執行此墊片。

Answer 2

在的WebPack我通常使用（webpack.config.js）：

externals: { 
    jquery: "jQuery" 
} 

然後：

import jQuery from 'jQuery'; 

您也可以嘗試：

import * as jQuery from 'jQuery'; 

Answer 3

如果您正在使用柯利支架在es6中，你只是說你只想要這個細分市場l分段該模塊返回。 jQuery的暴露的只有一件事，所以你可以這樣做： import $ from 'jquery'; 或者 import jQuery from 'jquery'; 它總是暴露在一個默認的變量

Answer 4

import jQuery from 'jquery'; 

或

import $ from 'jquery'; 

Answer 5

我試過這個answer，它工作。

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