Javascript bootstrap 4 中的 popper.js 给出了 SyntaxError 意外令牌导出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46459767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
popper.js in bootstrap 4 gives SyntaxError Unexpected token export
提问by Павел Шиляев
I tried install bootstrap 4, and included following links
我尝试安装引导程序 4，并包含以下链接
<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/tether/dist/js/tether.min.js" ></script>
<script src="libs/popper.js/dist/popper.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js" ></script>
But The following error occurs :
但是出现以下错误：
Uncaught syntaxError: Unexpected token export
未捕获的语法错误：意外的令牌导出
Any ideas how to fix it?
任何想法如何解决它？
采纳答案by Phani Kumar M
I encountered the same issue if I use popper.js from CDN network like cdnjs.
如果我使用来自 CDN 网络的 popper.js，我遇到了同样的问题cdnjs。
If you observe the source code of Bootstrap 4examples like for example Navbaryou can see that popper.min.jsis loaded from:
如果您观察Bootstrap 4示例的源代码，例如Navbar，您可以看到它popper.min.js是从以下位置加载的：
<script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js"></script>
I included that in my project and the error is gone. You can download the source code from
我将它包含在我的项目中，错误消失了。您可以从以下位置下载源代码
https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js
and include in your project as a local file and it should work.
并将其作为本地文件包含在您的项目中，它应该可以工作。
回答by Marc
Just got this too and figured why it really happens. In case others get by here:
刚刚也得到了这个并想出了为什么它真的会发生。如果其他人通过这里：
Check the readme.md "Usage". The lib is available in three version for three difference module loaders. In short: if you load it with the <script>tag then you must use the UMDversion. You can find it in /dist/umd. The default (in /dist) is the ESNext(ECMA-Script) which can not be loaded using the scripttag.
检查 readme.md “用法”。该库可用于三个不同的模块加载器的三个版本。简而言之：如果您使用<script>标签加载它，那么您必须使用UMD版本。你可以在/dist/umd. 默认（in /dist）是ESNext(ECMA-Script)，它不能使用script标签加载。
回答by Zim
Bootstrap 4 requires the UMD version of popper.js, and make sure the order is as follows:
Bootstrap 4 需要 UMD 版本popper.js，并确保顺序如下：
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="~/Scripts/jquery-3.0.0.min.js"></script>
<script src="~/Scripts/umd/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
回答by webdeveloper086
You can also add bootstrap.bundle.min.js and remove popper.js in your html.
您还可以在 html 中添加 bootstrap.bundle.min.js 并删除 popper.js。
Bundled JS files (bootstrap.bundle.jsand minified bootstrap.bundle.min.js) include [Popper](https://popper.js.org/), but not jQuery.
捆绑的 JS 文件（bootstrap.bundle.js和缩小的bootstrap.bundle.min.js）包括 [Popper]( https://popper.js.org/)，但不包括jQuery。
回答by ycs
You have following code in Bundle Config bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"));
您在 Bundle Config bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js")); 中有以下代码
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/umd/popper.min.js",
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
following code in layout html
布局html中的以下代码
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
This worked for me
这对我有用
回答by Rob
Line 96 in README
自述文件中的第 96 行
Dist targets
分布目标
Popper.js is currently shipped with 3 targets in mind: UMD, ESM and ESNext.
Popper.js 目前有 3 个目标：UMD、ESM 和 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 andbabel-preset-env;
- UMD - 通用模块定义：AMD、RequireJS 和 globals；
- ESM - ES Modules：用于支持规范的 webpack/Rollup 或浏览器；
- ESNext：在 中可用
dist/，可以与 webpack 和 一起使用babel-preset-env；
Make sure to use the right one for your needs. If you want to import it with a <script>tag, use UMD.
确保使用适合您的需求的产品。如果要带<script>标签导入，请使用 UMD。
