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

【问题标题】：how to handle output files in parcel如何处理包裹中的输出文件
【发布时间】：2020-11-04 02:00:24
【问题描述】：

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

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 和图像的输出路径吗？

【问题讨论】：

标签： parceljs

【解决方案1】：

很遗憾，此功能不受包裹开箱即用的支持。 Parcel v1 你可以使用this plugin。对于 parcel v2，可以编写一个 namer plugin 来完成此操作。

这是代码（打字稿）：

    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", "..."]
    }

这里是an example repo where this is working。

【讨论】：