ビルドに Parcel を使用するように古い React プロジェクトを変換中です。
現状では、ほとんどすべてが機能していますが、静的アセットを扱うのに苦労しています。多くのスタイルシート、js ライブラリ (jquery、jquery-ui など) を参照する index.html があります。これらを 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ファイル自体からインポートを削除せずにこれを回避する方法はありますか?