ParcelJS：使用相同的代码将 HTML 构建到不同的子目录答案

【问题标题】：ParcelJS: Build HTML to different subdirectories using the same codeParcelJS：使用相同的代码将 HTML 构建到不同的子目录
【发布时间】：2021-10-28 10:42:37
【问题描述】：

我有两个使用相同 Javascript 代码和资产的 .html 文件。由于它们代表同一个站点的不同语言版本，我想用 parcel 将它们构建到不同的子目录中。

目前，我正在以不对称的方式构建这些。 .html 文件是入口点，index.html 是英文版本：

当前输入：

  |-*.css, *.js, ...
  |–index.html
  |-de.html

当前输出：

dist
  |-*.css, *.js, ...
  |-index.html
  |-de.html

当前构建命令

parcel build --public-url . index.html de.html

但是，我希望以更对称的方式使用它们：

所需输入：

  |-*.css, *.js, ...
  |–en
     |-index.html
  |-de
     |-index.html

期望的输出：

dist
  |-*.css, *.js, ...
  |–en
    |- index.html
  |-de
    |- index.html

我在这里想知道两件事：

构建命令需要是什么样的？
将文件的位置从index.html 和de.html 更改为en/index.html 和de/index.html 时，我是否已将html 文件中的相关链接向上移动，例如？ G。从 <link rel="stylesheet" href="example.css"> 到 <link rel="stylesheet" href="./example.css"> 还是通过更改构建命令自动解决？

【问题讨论】：

标签： javascript html npm parceljs

【解决方案1】：

我能够使用来自错误报告here 的这个示例自己解决它。因为我只想保留入口点的文件结构（在我的例子中是 html 文件），所以这很容易实现。

例如，使用以下输入：

|- test.js
|- locales
   |- en
      |- index.html
   |- de
      |- index.html

我得到以下输出：

dist
|- test.js
|- en
   |- index.html
|- de
   |- index.html

在我的package.json 中使用这个命令：

parcel build locales/**/*.html --public-url ../

要在其中一个 html 文件中使用test.js，需要使用这种结构上两个目录：

<script src="../../test.js"></script>

当然也可以省略子目录locales，那么脚本中只需要使用../即可。

如果要保留非入口点的目录结构似乎并不容易，但对我来说，这很容易。

【讨论】：