Я в процессе преобразования старого проекта 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, это создает некоторые проблемы:
- Файлы jquery, статические ресурсы и т. Д. Все переименовываются.Это создает проблемы, когда некоторые библиотеки jquery должны ссылаться на глобальный файл jquery, так как он имеет другое имя файла (т.е. jquery.563534.js)
- Я бы предпочел не размещать эти файлы в каталоге src и вместо этого предпочесть, чтобы они находилисьв «статическом» каталоге вне src.
- Я не хочу тратить время на ожидание анализа этих файлов, поскольку это не нужно.
Есть идеи, как можно избежать этого, не удаляя импорт из самого файла HTML?