如何处理包裹中的输出文件

Question

我有一个具有这种结构的项目：

src
 |- index.pug
 | - layout
 |     |- index.less
 | - scripts
 |     |- index.js

现在，当我运行 parcel build src/index.pug 时，所有文件都被捆绑在一起，并且我在分发文件夹中找到了它：

dist
  |- index.html
  |- index.12345.css
  |- index.12345.js

当我期待这样的事情时：

ist
  |- index.html
  |- layout
  |    |- index.12345.css
  |- scripts
  |    |- index.12345.js

所以，我的问题是：我可以使用 ParcelJS 为我的 CSS、js 和图像指定输出路径吗？

Answer 1

不幸的是，包裹不支持开箱即用。Parcel v1 你可以使用这个插件。对于 Parcel v2，可以编写一个命名器插件来完成此任务。

这是代码（打字稿）：

    import { Namer } from "@parcel/plugin";
    import type { Bundle } from "@parcel/types";
    import path from "path";
    
    export default new Namer({
      name({ bundle }) {
        switch (bundle.type) {
          case "js":
            return getPathWithFolder("scripts", bundle);
          case "less":
            return getPathWithFolder("layout", bundle);
          case "css":
            return getPathWithFolder("layout", bundle);
          default:
            return null;
        }
      },
    });
    
    function getPathWithFolder(folderName: string, bundle: Bundle): string | null {
      const filePath = bundle.getMainEntry()?.filePath;
      if (!filePath) return null;
      let nameWithoutExtension = path.basename(filePath, path.extname(filePath));
      if (!bundle.needsStableName) {
        // See: https://parceljs.org/plugin-system/namer/#content-hashing
        nameWithoutExtension += "." + bundle.hashReference;
      }
      return `${folderName}/${nameWithoutExtension}.${bundle.type}`;
    }

然后，假设上述代码发布在名为 的包中parcel-namer-folders，您可以使用以下命令将其添加到您的包裹管道中.parcelrc：

    {
      "extends": "@parcel/config-default",
      "namers": ["parcel-namer-folders", "..."]
    }

这是一个可以正常工作的示例存储库。