4

我正在将旧的 React 项目转换为使用 Parcel 进行构建。

就目前而言，我几乎所有东西都在工作，但我很难处理静态资产。我有一个 index.html，它引用了许多样式表、js 库（例如 jquery、jquery-ui 等）。我知道最好将这些导入到我的 javascript 文件中，但目前这不是一个选项，因此它们需要保持全局性。

index.html 文件如下所示：

<head>
    <!--<link rel="stylesheet/less"    type="text/css" href="/css/styles.less"></link> --> 
    <link rel="stylesheet"         href="/css/react-calendar.css"></link>
    <link rel="stylesheet"         href="/css/reactTags.css"></link>
    <link rel="stylesheet"         href="/js/jquery-confirm/dist/jquery-confirm.min.css"></link> 
    <link rel="stylesheet"         href="/css/jquery.qtip.css"></link>
    <link rel="stylesheet"         href="/css/app.css"></link>
    <link rel="stylesheet"         href="/css/font-awesome.min.css"></link>
    <link rel="stylesheet"         href="/css/table-twbs.css"></link>
    <link rel="stylesheet"         href="/css/jquery-ui.css"></link>
    <link rel="stylesheet"         href="/libs/bootstrap/css/bootstrap.min.css"></link>
    <link rel="stylesheet"         href="/libs/bootstrap/css/bootstrap-grid.min.css"></link>
    <link rel="stylesheet"         type="text/css" href="/css/codemirror.min.css"></link>
    <link rel="stylesheet"         type="text/css" href='/css/react-datetime.css'></link>
    <link rel="stylesheet"         href="/libs/tablesorter-master/css/theme.default.css"></link>
    <link rel="stylesheet"         href="/css/styles.css"></link>
    <link rel="stylesheet"         href="/css/react-table.css">

    <script type="text/javascript" src="/js/list-columns.js"></script>
    <script type="text/javascript" src="/libs/less.min.js"></script>
    <script type="text/javascript" src="/libs/tinymce/js/tinymce/tinymce.min.js"></script>
    <script type="text/javascript" src="/libs/jquery-3.3.1/jquery.min.js"></script>     
    <script type="text/javascript" src="/libs/jquery-2.1.1.1-nav.min.js"></script> 
    <script type="text/javascript" src="/libs/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/jquery-confirm/dist/jquery-confirm.min.js"></script>
    <script type="text/javascript" src="/libs/bootstrap/js/bootstrap-nav.min.js"></script>
    <script type="text/javascript" src="/libs/tablesorter-master/js/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="/libs/tablesorter-master/js/jquery.tablesorter.widgets.js"></script> 
    <!-- Tablesorter: widgets (optional) -->
    <script src="/libs/tablesorter-master/js/widgets/widget-sortTbodies.js"></script>
    <!-- end Tablesorter widgets -->
    <script type="text/javascript" src="/libs/jquery.qtip.js"></script>
    <script type="text/javascript" src="/libs/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/libs/jquery.ba-urlinternal.min.js"></script>
    <!-- D3 for reports - REVL in REVL.html-->
    <script type="text/javascript" src="/libs/d3.4_10_0.min.js"></script>
    <script type="text/javascript" src="/libs/polybool.min.js"></script>
    <script                        src="/libs/jquery.mark.min.js"></script>
    <link rel="stylesheet" href="/css/revl.css"></link>
</head>

使用 parcel，我必须将所有这些文件包含在 src 文件夹中，否则在解析 index.html 文件时会引发错误（即“找不到 jquery”）。但是，当我在 src 目录中包含这些文件时，会产生一些问题：

  1. jquery 文件、静态资产等都被重命名。当某些 jquery 库需要引用全局 jquery 文件时，这会产生问题，因为它具有不同的文件名（即 jquery.563534.js）
  2. 我不希望将这些文件放在 src 目录中，而是将它们驻留在 src 之外的“静态”目录中。
  3. 我不想花时间等待这些文件被解析，因为它是不必要的。

有什么想法可以在不从 HTML 文件本身中删除导入的情况下避免这种情况吗？

4

0 回答 0