时间戳

首页 > 解决方案 > ParcelJS：使用相同的代码将 HTML 构建到不同的子目录

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

问题描述

我有两个使用相同 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

我在这里想知道两件事：

标签： javascripthtmlnpmparceljs

解决方案

我可以使用这里的错误报告中的这个示例自己解决它。因为我只想保留我的入口点的文件结构（在我的例子中是 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 ../

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

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

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

如果一个人想要保留非入口点的目录结构，这似乎并不容易，但就我而言，这很容易。

推荐阅读