Question

我正在转换一个旧的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>

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

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

有什么想法可以避免这种情况，而无需从HTML文件本身中删除导入内容？

使用index.html中引用的静态资产构建项目-Parcel

0 个答案: