Bootstrap4 离线化的一个坑

由于项目需要离线运行，因此网页必须全部本地化，没法使用 CDN 了。我就先后分别把 Bootstrap 和 jQuery 下载到了本地，就这么准备运行了。

结果，网页里的下拉菜单 Dropdown 死活不能运行，看 Console 中提示是：

Uncaught TypeError: Bootstrap dropdown require Popper.js (https://popper.js.org) at a.l.toggle (dropdown.js:151) at HTMLButtonElement. (dropdown.js:308) at Function.each (jquery.min.js:2) at w.fn.init.each (jquery.min.js:2) at w.fn.init.a._jQueryInterface [as dropdown] (dropdown.js:295) at HTMLButtonElement. (dropdown.js:448) at HTMLDocument.dispatch (jquery.min.js:2) at HTMLDocument.y.handle (jquery.min.js:2)

于是把 popper.min.js 下下来扔到 static 目录中，写个 <script> 引用它，信心满满去刷新。

结果，还是不行。

是不是有缓存？再刷几次看看？

刷新几次后，还是不行。

咋回事儿？

于是上网搜索，听说 popper.js 没有在仓库里放编译完整的包，于是我就把原来的 static 文件都删了，全部通过 npm 来安装：

1
2
3

$ npm install bootstrap
$ npm install jquery
$ npm install popper.js

安装之后，还得改下 Django 的静态文档路径，这个看文档吧：Settings | Django documentation

然后用 <script> 标签对静态文档进行引用，写完了之后，又一次信心满满地去刷新了。

还是不行。

。

。

。

奇怪啊，为啥不行啊？

再一次把错误扔进 Google，毕竟是面向 Google 编程嘛。

然后搜出来了在 TWBS 这位 Johann-S 在一个 issue 下的回复 ：

Popper.js should be included before Bootstrap in your HTML

看到之后，虎躯一震，惊了。

突然回想起了 js script 的优先级。

gg

把 popper.min.js 放在 bootstrap.min.js 引用顺序之前。

果然好了。

嗯。

所以遇事多 Google 。

这也不算是一个坑吧其实还是自己辣鸡。

就酱，继续去写业务了。