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

【问题标题】：Bundling Bootstrap 4 - Bootstrap tooltips require Tether捆绑 Bootstrap 4 - Bootstrap 工具提示需要 Tether
【发布时间】：2017-10-01 08:04:39
【问题描述】：

我有一个使用 Bootstrap 4 构建的应用程序。在这个应用程序中，我有一个 Bower 文件，具有以下内容：

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
}

我正在尝试将这些文件与几个自定义 JavaScript 文件捆绑在一起。为了尝试做到这一点，我有以下 Gulp 任务：

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

然后，在我的网页中，我像这样引用文件：

index.html

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

我的网页加载完毕，我可以看到 bundle.js 已成功加载。但是，在控制台窗口中，我看到以下错误：

未捕获的错误：引导工具提示需要 Tether

我相信这就是我的汉堡菜单不再适用于移动设备的原因。我的问题是，有没有办法将这些文件捆绑在一起？或者，我需要单独加载每个吗？

【问题讨论】：

Tether 变量是在你的包加载后定义的吗？
tether.min.js 文件的内容已复制到 bundle.js 中。内容出现在 Bootstrap.min.js 文件的内容之前。
尝试使用最新的引导程序 4.0.0-alpha.6 而不是 alpha 5。还有最新的 Tether 版本 1.4。如果我使用 alpha5，我的工具提示也不起作用。

标签： javascript twitter-bootstrap

【解决方案1】：

我复制了你的项目。

你 gulp 文件中指向 tether JS 文件的 URL 似乎不正确。

应该是：

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

代替：

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

【讨论】：