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

Posted 2023-02-23

【中文标题】如何处理包裹中的输出文件

【英文标题】：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 和图像的输出路径吗？

【参考方案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。