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

Program / 글쓴이

나는 부트 스트랩 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는 포함 되지 않습니다 .

답변

README의 96 행

거리 타겟

Popper.js는 현재 UMD, ESM 및 ESNext의 세 가지 대상을 염두에두고 제공됩니다.

  • UMD-범용 모듈 정의 : AMD, RequireJS 및 글로벌;
  • ESM-ES 모듈 : 사양을 지원하는 웹팩 / 롤업 또는 브라우저 용;
  • ESNext :에서 사용 가능 dist/하며 webpack 및 babel-preset-env;

귀하의 필요에 맞는 것을 사용하십시오. <script>태그 와 함께 가져 오려면 UMD를 사용하세요.

답변

번들 구성 번들에 다음 코드가 있습니다 .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")

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

답변