나는 부트 스트랩 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
프로젝트에 로컬 파일로 포함하면 작동합니다.
popper.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는 포함 되지 않습니다 .
bootstrap.bundle.min.js포함popperjs
README의 96 행
Popper.js는 현재 UMD, ESM 및 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")
이것은 나를 위해 일했습니다.