捆绑Bootstrap 4 - Bootstrap工具提示需要Tether

Question

I have an app that's being built with Bootstrap 4. In this app, I have a Bower file, has the following:

bower.json

{
  "name": "myApp",
  "version": "1.0.0",
  "dependencies": {
    "jquery": "2.1.4",
    "tether": "1.2.0",
    "bootstrap": "v4.0.0-alpha.5"
  },
  "private": true
}

I am trying to bundle these files with several custom JavaScript files. In an attempt to do this, I have the following Gulp task:

gulpfile.js

gulp.task('bundleJs', function() {
  var jsFiles = [
    './bower_components/jquery/dist/jquery.min.js',
    './bower_components/tether/dist/tether.min.js',
    './bower_components/bootstrap/dist/js/bootstrap.min.js',
    './public/core.js',
    './public/utils.js'
  ];

  return gulp.src(jsFiles)
    .pipe(concat('bundle.js'))
    .pipe(gulp.dest('./public/js'))
  ;
});

Then, in my web page, I'm referencing the file like this:

index.html

<script type="text/javascript" src="/public/js/bundle.js"></script>

My web page loads and I can see that bundle.js has successfully loaded. However, in the console window, I see the following error:

Uncaught Error: Bootstrap tooltips require Tether

I believe that this is why my hamburger menu no longer works on mobile. My question is, is there a way to bundle these files together? Or, do I need to load each individually?

Answer 1

I replicated your project.

The URL pointing to the tether JS file in you gulp file seems to be incorrect.

It should be:

'./bower_components/tether/dist/js/tether.min.js',

instead of:

'./bower_components/tether/dist/tether.min.js',