node.js - Node : Bootstrap's JavaScript requires jQuery

Question

我正在阅读《曼宁变得卑鄙》一书。我想使用 bootstrap sass 并已加载 bootstrap-loader 。当我运行 nodemon 时，出现以下错误:

/Users/mglaz/Projects/mean/theCMF/node_modules/bootstrap/dist/js/bootstrap.js:8
throw new Error('Bootstrap\'s JavaScript requires jQuery')

这是我的app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

require('jquery');
require('bootstrap');
require('bootstrap-loader');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

和我的package.json

{
  "name": "loc8r",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.8.1",
    "cookie-parser": "~1.3.3",
    "debug": "~2.0.0",
    "express": "~4.9.0",
    "jquery": "^3.1.1",
    "morgan": "~1.3.0",
    "pug": "^2.0.0-beta6",
    "serve-favicon": "~2.1.3"
  },
  "devDependencies": {
    "bootstrap": "^4.0.0-alpha.4",
    "css-loader": "^0.26.1",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "imports-loader": "^0.7.0",
    "node-sass": "^3.13.1",
    "postcss-loader": "^1.2.0",
    "resolve-url-loader": "^1.6.1",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.14.0"
  }
}

Answer 1

看看jQuery not define in bootstrap module和 http://blog.npmjs.org/post/112064849860/using-jquery-plugins-with-npm

您需要设置全局 jQuery 变量

global.jQuery = require('jquery');
require('bootstrap');