时间戳

首页 > 解决方案 > React 的 bundle.js 阻止静态 JS 运行

javascript - React 的 bundle.js 阻止静态 JS 运行

问题描述

所以我有一个模板（index.html），我的反应应用程序正在被渲染到。在这个模板中，我在头部导入了静态 CSS 文件，在结束 body 标记之前导入了静态 JS 文件。我的静态 JS 文件没有正确加载，导致页面呈现错误。我已经确定了我认为是什么原因，但我不确定如何解决它。

页面加载错误：

<body>
 <script src="js/jquery-3.2.1.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script src="js/owl.carousel.min.js"></script>
 <script src="js/masonry.pkgd.min.js"></script>
 <script src="js/magnific-popup.min.js"></script>
 <script src="js/main.js"></script>
 <script src="bundle.js"></script>
</body>

页面加载正确（但我认为它在技术上不正确）：

<body>
 <script src="bundle.js"></script>
</body>
  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/masonry.pkgd.min.js"></script>
  <script src="js/magnific-popup.min.js"></script>
  <script src="js/main.js"></script>
 </html>

来自 react 的 bundle.js 文件被插入到我所有的静态 js 文件后面，我认为由于层次结构，它正在覆盖之前加载的静态 js 文件中的一些属性。我注意到，当我将静态 js 文件放在结束 body 标记之外时，页面呈现得更好。仍然有一些错误，但更接近我的最终目标。我的理解是 script 标签应该放在结束 body 标签之前，所以虽然我找到了一个修复，但我想也许它不是正确的修复。这是一个投资组合项目，所以我需要它。想知道是否有人知道如何解决这个问题。是否可以在我的所有脚本标签之前加载 bundle.js？

标签： javascriptreactjswebpack

解决方案

推荐阅读