developer tip

부트 스트랩 4의 popper.js는 SyntaxError 예기치 않은 토큰 내보내기를 제공합니다.

copycodes 2020. 12. 26. 15:40
반응형

부트 스트랩 4의 popper.js는 SyntaxError 예기치 않은 토큰 내보내기를 제공합니다.


나는 부트 스트랩 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>

그러나 다음과 같은 오류가 발생합니다.

발견되지 않은 구문 오류 : 예기치 않은 토큰 내보내기

여기에 이미지 설명 입력

그것을 고치는 방법에 대한 아이디어가 있습니까?


같은 CDN 네트워크에서 popper.js를 사용하면 같은 문제가 발생했습니다 cdnjs.

Bootstrap 4예를 들어 Navbar 와 같은 예제 의 소스 코드를 관찰하면 다음 popper.min.js에서로드 된 것을 볼 수 있습니다 .

<script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js"></script>

내 프로젝트에 포함 시켰는데 오류가 사라졌습니다. 다음에서 소스 코드를 다운로드 할 수 있습니다.

https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js

프로젝트에 로컬 파일로 포함하면 작동합니다.


이것도 얻었고 왜 실제로 발생하는지 알아 냈습니다. 다른 사람이 여기에 도착하는 경우 :

readme.md "사용법"을 확인하십시오. lib는 세 가지 다른 모듈 로더에 대해 세 가지 버전으로 제공됩니다. 간단히 말해서 <script>태그로 로드하는 경우 UMD 버전을 사용해야합니다 . 에서 찾을 수 있습니다 /dist/umd. 기본값 ( /dist)은 태그를 사용하여로드 할 수없는 ESNext (ECMA-Script)입니다 script.


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>

bootstrap.bundle.min.js를 추가하고 html에서 popper.js를 제거 할 수도 있습니다.

번들로 제공되는 JS 파일 ( bootstrap.bundle.js및 축소 된 bootstrap.bundle.min.js) 에는 [Popper] ( https://popper.js.org/ )가 포함되지만 jQuery는 포함 되지 않습니다 .


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"));

레이아웃 HTML의 다음 코드

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

이것은 나를 위해 일했습니다.

참조 URL : https://stackoverflow.com/questions/46459767/popper-js-in-bootstrap-4-gives-syntaxerror-unexpected-token-export

반응형