如何导入jQuery作为ES6中引导程序的依赖项？
我尝试过：
import {$,jQuery} from 'jquery'; import bootstrap from 'bootstrap';但我总是得到这个错误：
transition.js：59未捕获的ReferenceError：未定义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);有任何想法吗？
编辑：
我的gulp文件：
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" ] } }错误：
开始'build'... events.js：160 throw er; //未处理的'错误'事件^
错误：解析json文件时，位置526的JSON中的SyntaxError：Unexpected token}
How can I import jQuery as the dependency for bootstrap in ES6?
I tried with:
import {$,jQuery} from 'jquery'; import bootstrap from 'bootstrap';But I always get this error:
transition.js:59 Uncaught ReferenceError: jQuery is not defined
Which points to this file:
/* ======================================================================== * 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);Any ideas?
EDIT:
my gulp file:
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" ] } }error:
Starting 'build'... events.js:160 throw er; // Unhandled 'error' event ^
Error: SyntaxError: Unexpected token } in JSON at position 526 while parsing json file
最满意答案
一般来说，你在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执行这个shim。
In general the destructuring you are doing in the import is not right, as the $ or jQuery object is the main one:
import $ from 'jquery'; // or import jQuery from 'jquery'In your case you are dealing with a module (boostrap-transition) which does want jQuery in the global scope to be used. I had a similar issue some time ago with the materialize module too on this thing.
If you are using webpack you can follow @galkowskit answer steps. In case you are using browserify instead, what you need is a browserify transform as the follow:
"browser": { "jquery": "./node_modules/jquery/dist/jquery.js", }, "browserify-shim": { "jquery": "$", // or change it to jQuery }, "browserify": { "transform": [ "browserify-shim" ] }You can put this inside your package.json file: when Gulp is going to call browserify it will read your package.json for configuration tips and execute this shim for jQuery.
更多推荐
发布评论