I am in the process of converting an old React project to use Parcel for builds.
As it stands, I have most everything working but I am having a hard time dealing with static assets. I have an index.html that references many stylesheets, js libraries (such as jquery, jquery-ui, etc). I know it would be preferable to import these in my javascript files but at this time that is not an option so they need to remain global.
The index.html file looks like:
<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>
With parcel, I have to include all of these files in the src folder, otherwise it throws an error when parsing the index.html file (i.e. " jquery cant be found"). However, when I include these files in the src directory, this creates some problems:
- The jquery files, static assets, etc. are all renamed. This creates issues when some jquery libraries need to reference the global jquery file since it has a different filename (i.e. jquery.563534.js)
- I would prefer not to have these files in src directory and prefer instead they reside in a 'static' directory outside of src.
- I dont want to spend time waiting for these files to be parsed since it is unnecessary.
Any ideas how I can avoid this without removing the imports from the HTML file itself?