ES6+jQuery+Bootstrap-未捕获引用错误:未定义jQuery

ES6 + jQuery + Bootstrap - Uncaught ReferenceError: jQuery is not defined?

本文关键字：未定义 jQuery 错误 引用 ES6+jQuery+Bootstrap-      更新时间：2023-09-26

如何导入jQuery作为ES6中引导程序的依赖项？

我尝试过：

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

但我总是遇到这样的错误：

transition.js:59未捕获引用错误：jQuery未定义

哪个指向这个文件：

/* ========================================================================
 * 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"
    ]
  }
}

错误：

正在启动"生成"。。。events.js:160投掷者；//未处理的"错误"事件^

错误：SyntaxError:JSON中位置526处的意外令牌｝，而解析json文件

我试过这个答案，它成功了。

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

通常，您在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文件中：当Gulp要调用browserify时，它将读取package.json以获取配置提示，并为jQuery执行此填充程序。

在我通常使用的Webpack中(webpack.config.js(：

externals: {
  jquery: "jQuery"
}

然后：

import jQuery from 'jQuery';

你也可以试试：

import * as jQuery from 'jQuery';

如果您在es6中使用curley括号，则表示您只想要该模块返回的几个段中的那个段。Jquery只公开了一件事，因此您可以执行以下操作：import $ from 'jquery';或import jQuery from 'jquery';它将始终暴露给一个默认变量

import jQuery from 'jquery';

或

import $ from 'jquery';
相关文章：