如何在Bootstrap 4 beta中使用Popper.js

Question

我老了,所以我将源代码下载到1.12.0然后执行以下操作:

<script src="/popper.js-1.12.0/dist/popper.js"></script>
<script src="/bootstrap-4.0.0-beta/dist/js/bootstrap.js"></script>

但是我得到了:

Uncaught SyntaxError: Unexpected token export

在线2294说:

export default Popper;

Answer 1

您希望将package.json文件中main指定的dist目标用作条目.

在这种情况下,您正在寻找umd构建(dist/umd/popper.js)

什么是UMD？

该UMD模式通常试图提供与天(如RequireJS除其他外)最流行的脚本加载器的兼容性.在许多情况下,它使用AMD作为基础,添加了特殊外壳以处理CommonJS兼容性.

这意味着可以通过<script>标记加载UMD包并将其注入全局范围(window),但如果需要,还可以使用CommonJS加载程序(如RequireJS).

Answer 2

Popper要求您使用带有Bootstrap 4 的umd路径下的文件.

这些CDN版本都可以使用:

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd /popper.min.js

其他答案/评论提到版本,但问题与版本控制无关.

使用Bootstrap包含popper的例子从来都不是一个坏习惯,因为它应该始终有效.Bootstrap 4现在推荐popper 1.11,这是一个安全的选择,但版本1.12.5也可以正常工作.

旁注:为什么与umd,esm和普通ol'popper文件混淆？目的是灵活的模块包装,但实际上它可以更简单.这篇文章解释了新模块类型的一些问题.

Answer 3

确保使用Bootstrap文档中引用的Popper.js版本.

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

Answer 4

根据popper文档:

Popper.js目前有三个目标:UMD,ESM和ESNext.

UMD - 通用模块定义:AMD,RequireJS和全局变量;

ESM - ES模块:适用于支持规范的webpack/Rollup或浏览器;

ESNext:dist /中可用,可与webpack和babel-preset-env一起使用; 确保使用正确的一个满足您的需求.如果要使用标记导入它,请使用UMD.