如何在Bootstrap 4 beta中使用Popper.js
[英]How to use Popper.js with Bootstrap 4 beta
问题描述
I'm old school, so I downloaded the source code to 1.12.0 and then did the following: 
我老了，所以我将源代码下载到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>
But I'm getting: 但是我得到了：
Uncaught SyntaxError: Unexpected token export
on line 2294 where it says: 在2294行，它说：
export default Popper;
8 个解决方案
解决方案1
102 已采纳 2017-08-15 16:07:50
You want to use the dist target specified in the package.json file as main entry . 您希望将package.json文件中指定的dist目标用main条目 。
In this case, you are looking for the umd build ( dist/umd/popper.js ) 在这种情况下，您正在寻找umd构建（ dist/umd/popper.js ）
What's UMD? 什么是UMD？
The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (eg RequireJS amongst others).
This means that an UMD bundle can be loaded via <script> tag and get injected inside the global scope ( window ), but also work if required with a CommonJS loader such as RequireJS. 这意味着可以通过<script>标记加载UMD包并将其注入全局范围（ window ），但如果需要，还可以使用CommonJS加载程序（如RequireJS）。
解决方案2
20 2017-08-30 17:26:09
Popper requires that you use the file under the umd path with Bootstrap 4. Popper要求您使用带有Bootstrap 4的umd路径下的文件。
Either of these CDN versions will work: 这些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 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
Other answers/comments mention the version, however the problem is not related to versioning . 其他答案/评论提到版本， 但问题与版本控制无关 。
It's never a bad practice to use Bootstrap's example of including popper because it should always work. 使用Bootstrap包含popper的例子从来都不是一个坏习惯，因为它应该始终有效。 Bootstrap 4 as of now recommends popper 1.11 which is a safe choice, however version 1.12.5 should work fine as well. Bootstrap 4现在推荐popper 1.11，这是一个安全的选择，但版本1.12.5也可以正常工作。
Side note: Why the confusion with umd, esm, and plain ol' popper files? 旁注：为什么与umd，esm和普通ol'popper文件混淆？ The intention is flexible module packaging, but in reality it could be made simpler. 目的是灵活的模块包装，但实际上它可以更简单。 This post explains some of the issues with new module types. 这篇文章解释了新模块类型的一些问题。
解决方案3
12 2017-08-15 14:30:48
Make sure you use the Popper.js version referenced in the Bootstrap docs. 确保使用Bootstrap文档中引用的Popper.js版本。
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
解决方案4
6 2018-03-28 11:09:31
As per the popper docs : 根据popper文档 ：
Popper.js is currently shipped with 3 targets in mind: UMD, ESM and ESNext.
UMD - Universal Module Definition: AMD, RequireJS and globals;
ESM - ES Modules: For webpack/Rollup or browser supporting the spec;
ESNext: Available in dist/, can be used with webpack and babel-preset-env;
解决方案5
1 2017-11-02 05:11:27
I had the same problem. 我有同样的问题。 Tried different approaches, but this one worked for me. 试过不同的方法，但这个方法对我有用。 Read the instruction from http://getbootstrap.com/ . 阅读http://getbootstrap.com/上的说明。
Copy the CDN links (jQuery, Popper and Bootstrap) in same order (it is important) as given. 以给定的顺序（重要的）复制CDN链接（jQuery，Popper和Bootstrap）。
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
解决方案6
1 2019-03-06 20:42:51
Just use bootstrap's bundle version and your good! 只需使用bootstrap的捆绑版本就可以了！
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<!-- <script src="./node_modules/popper.js/dist/popper.min.js"></script> -->
<!-- <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
解决方案7
1 2019-04-03 00:40:47
As per Fez Vrasta. 按照Fez Vrasta。
If retrieving popper through NuGet Package Manager within Visual Studio make sure your popper.js script reference path is using the umd folder: 如果通过Visual Studio中的NuGet包管理器检索popper，请确保您的popper.js脚本引用路径使用的是umd文件夹：
MVC ASP.Net BundleConfig example: MVC ASP.Net BundleConfig示例：
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/umd/popper.js", //path with umd
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
Direct script reference example: 直接脚本参考示例：
<script src="~/Scripts/umd/popper.js" type="text/javascript"></script>
解决方案8
0 2018-06-26 18:19:30
Separate Containers: 独立容器：
If you followed the accepted answer and your tool-tips are still in the wrong place, it might be because you have a different container for each tool-tip. 如果您按照接受的答案并且工具提示仍然在错误的位置，则可能是因为每个工具提示都有不同的容器。
I would try this to allow the tool-tip to be placed near the parent of the element : 我会尝试这个让工具提示放在元素的父元素附近 ：
const initializeTooltips = function () {
$('[data-toggle="tooltip"]').each(function() {
$(this).tooltip({container: $(this).parent()});
});
};
$(document).ready(function () {
initializeTooltips();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.