vladimirmikulic / parcel-plugin-custom-dist-structure

🚀 Parcel plugin that allows you to specify a custom dist structure.

parcel-plugin-custom-dist-structure

🚀 Parcel plugin that allows you to specify a custom dist structure.

This is the plugin for Parcel v1. @gatsbyjs/parcel-namer-relative-to-cwd can be used for Parcel v2.

📦 Installation

# Installs the plugin and saves it as a development dependency
npm i parcel-plugin-custom-dist-structure --save-dev

☁️ Usage

After you've installed the plugin, you'll need to specify configuration for it in package.json.

The plugin configuration is very simple, but also very flexible.

It will generate the structure you specify in the configuration object while also handle all your imports (css, images, js...) which makes it suitable for all use cases, from simple websites all the way to complex React/Angular/Vue projects.

Example configuration object in package.json:

"customDistStructure": {
  "config": {
    // Output JS files to dist/js folder
    ".js": "js",
    // Output JPG and PNG files to dist/images folder
    "images": [
      ".jpg",
      ".png"
    ],
    // General idea
    ".fileExtension": "folder/in/dist",
    "folder/in/dist": [ ".file", ".extensions" ]
  },
  "options": {
    // Enable plugin in development mode (default: false)
    "development": true
  }
}

⚠️ NOTE: In order for this plugin to work, Parcel needs to be installed as a project dependency (globally installed parcel won't work)

✨ Run tests

The plugin uses Jest for running tests.

Jest will execute all .test.js files in the test folder.

npm test

👨 Author

Vladimir Mikulic

• Twitter: @VladoDev
• Github: @VladimirMikulic
• LinkedIn: @vladimirmikulic

🤝 Contributing

Contributions, issues and feature requests are welcome!

📝 License

This project is licensed under MIT license.

👨‍🚀 Show your support

Give a ⭐️ if this project helped you!

parcel-plugin-custom-dist-structure's Issues

Multiple entries support

{
    "build": "parcel build src/pages/*.html"
}

🚨  Cannot read property 'parentBundle' of null
    at DependencyGraph.get entryAssetPath [as entryAssetPath] (/Users/ziven27/Pro/yss-template/node_modules/parcel-plugin-custom-dist-structure/lib/DependencyGraph.js:74:35)
    at DependencyGraph.buildDependencyGraph (/Users/ziven27/Pro/yss-template/node_modules/parcel-plugin-custom-dist-structure/lib/DependencyGraph.js:13:33)
    at new DependencyGraph (/Users/ziven27/Pro/yss-template/node_modules/parcel-plugin-custom-dist-structure/lib/DependencyGraph.js:9:10)
    at Bundler.bundler.on.bundle (/Users/ziven27/Pro/yss-template/node_modules/parcel-plugin-custom-dist-structure/lib/index.js:17:19)
    at Bundler.emit (events.js:203:15)
    at Bundler.bundle (/Users/ziven27/Pro/yss-template/node_modules/parcel-bundler/src/Bundler.js:340:12)
    at process._tickCallback (internal/process/next_tick.js:68:7)
error Command failed with exit code 1.

when i have script in my package.json , it will show this error.

{
    "build": "parcel build src/pages/index.html"
}

but this is ok.

How to save svg fonts to the fonts folder?

Hi first thank you for such a cool plugin. There was a need to save fonts, in this configuration all fonts are saved except for vector fonts. How to exclude svg files from images?
"customDistStructure": { "config": { ".css": "css", ".js": "js", "images": [ ".jpg", ".svg", ".png" ], ".eot": "fonts", ".ttf": "fonts", ".woff": "fonts", ".woff2": "fonts", "fonts": [ ".Montserrat-Light", ".svg" ], "fonts": [ ".Montserrat-Regular", ".svg" ] }, "options": { "development": true } }

Custom dist structure in parcel v2

Hi! I found this package through a stackoverflow issue that you answered. Thanks for contributing your work to the community!

The readme says

This is the plugin for Parcel v1. The plugin for the second version can be found here.

However, the link to the "second version", although it does support parcelv2, seems to have some pretty different functionality - ignoring assets, instead of re-structuring the folder output.

Someone else asked a similar question more recently that I answered by providing some sample code on how to write a plugin similar to this one, but for v2.

I was thinking of starting a project that had the goal of matching the functionality of this plugin, but with support for v2, and I wanted to check with you to see if you had already started this work, or if you'd like to collaborate? It's okay if not - I'll just write it myself. But I thought it might be good to not duplicate work if possible, and to make sure the docs of both plugins reference each other so people have an easier time finding the right one.

DevTools failed to load SourceMap

Describe the bug

DevTools can't parse generated source maps.

How it happened?

The error is pretty much trivial and happens because of the path replacements (probably only for Windows).

It's easy to identify the reason just looking at the console log.

DevTools error message:
Unexpected token s in JSON at position 86

Now, let's take a look at the generated source map file.

The source map JSON:

{"version":3,"sources":[],"names":[],"mappings":"","file":"main.css","sourceRoot":"..\src"}

See, the sourceRoot value contains a non-escaped string. Should be "..\\src";

Desktop (please complete the following information):

• OS: Windows 10 Pro
• Parcel version: 1.12.4
• Plugin version: 1.1.14

Plugin configuration object:

"customDistStructure": {
  "config": {
    "css": [
      ".css",
      ".css.map"
    ],
    "js": [
      ".js",
      ".js.map"
    ]
  },
  "options": {
    "development": true
  }
}

Multiple HTML pages cannot use the same css, image

There are multiple pages index.html and main.html, but the same css and image cannot be used together. Only the first one used can be displayed correctly

OS: Windows 10
Parcel version: ^1.12.4
Plugin version: ^1.1.10

package.json

{
  "name": "demo-parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "scripts": {
    "clean": "rm dist/index.js",
    "start": "parcel ./src/index.html ./src/main.html",
    "build": "parcel build ./src/index.html --public-url ./"
  },
  "customDistStructure": {
    "config": {
      "js": [
        ".js",
        ".js.map"
      ],
      "css": [
        ".css",
        ".css.map"
      ],
      "images": [
        ".jpg",
        ".png"
      ]
    },
    "options": {
      "development": true
    }
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "autoprefixer": "^9.7.6",
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-custom-dist-structure": "^1.1.10",
    "parcel-plugin-nuke-dist": "^1.0.1",
    "postcss-modules": "^2.0.0",
    "sass": "^1.26.5"
  }
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Empty project</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>
    <div id="app">
      <div class="menu">
        <a href="./index.html" class="current">home</a>|
        <a href="./main.html">main</a>
      </div>
      <h1>home content</h1>
      <div class="pic"></div>
    </div>
    <script src="./js/index.js"></script>
  </body>
</html>

main.html

<!DOCTYPE html>
<html>
  <head>
    <title>Empty project</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>
    <div id="app">
      <div class="menu">
        <a href="./index.html">home</a>|
        <a href="./main.html" class="current">main</a>
      </div>
      <h1>main content</h1>
      <div class="pic"></div>
    </div>
    <script src="./js/index.js"></script>
  </body>
</html>

Preview：index.html Is normal and can be displayed

Preview：main.html Is normal and can be displayed

But switch to main.html, it will not display properly
It seems that the css and images paths are not correct

Wrong file path links in development mode - HTML files

Hey @VladimirMikulic. Hope you're keeping well!

As you can see in the example above, it's loosing the correct path "/css/", "/js/" and "/images/" in the compiled HTML(dist folder) file, BUT it only happens when the HTML(src folder) is modified.

Again, while i'm working on the SCSS file and saving, everything works fine. Once I change anything in the HTML, it breaks!
I haven't test anything with JS files at this point, so if you can run some tests...

<link rel="stylesheet" href="/styles.164d45a1.css">
<script src="/styles.164d45a1.js"></script>
<img src="/illustration-office.db97d6a7.png" alt="">

Thank you!

Websocket is not open - Error

Hi

I was using parcel bundler with your awesome plugin and suddenly got this attached error. I am not a backend guy and did not understood this error. Can u pls tell me what caused this error and what is it?

Note: My system was idle for like 90 mnts just for info. I may be related to the problem so I am sharing.

Regards,
Shehzad Asif
Front End Developer

The plugin doesn't work for me

Hi, it's just the plugin I was looking for for me that I make sites but unfortunately I can't get it to work.
It does not create folders in the "dist" directory
This is my Package.json

`{
  "name": "provaparcel2",
  "version": "1.0.0",
  "dependencies": {
    "parcel": "^2.0.0-beta.1",
    "sass": "^1.26.10"
  },
  "devDependencies": {
    "autoprefixer": "^9.8.6",
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-clean-easy": "^1.0.2",
    "parcel-plugin-custom-dist-structure": "^1.1.14",
  },
  "scripts": {
    "start": "parcel serve index.html",
    "build": "parcel build index.html --public-url ./"
  },
  "keywords": [],
  "author": "Andrea Baccolini",
  "license": "ISC",
  "description": "",
  "parcelCleanPaths": [
    "dist"
  ],
  " customDistStructure ": {
    " config ": {
      " .css ": " css ",
      " .js ": " js ",
      " images ": [
        " .jpg ",
        " .svg ",
        " .png "
      ],
      ".fileExtension": "folder/in/dist",
      "folder/in/dist": [ ".file", ".extensions" ]
    },
    "options": {
      "development": true
  }
}}

File path wrongly referenced on Windows in built project

Inserting pictures in HTML is normal under dev and build mode. But if the image is changed to SCSS, the dev is normal, but the build mode cannot be displayed?
Looks like a picture path problem?

• OS: Windows 10
• Parcel version: v1.12.4
• Plugin version: v1.1.9

package.json

{
  "name": "demo-parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "scripts": {
    "clean": "rm dist/index.js",
    "start": "rm -rf ./dist && parcel ./src/index.html",
    "build": "rm -rf ./dist && parcel build ./src/index.html --public-url ./"
  },
  "customDistStructure": {
    "config": {
      "js": [
        ".js",
        ".js.map"
      ],
      "css": [
        ".css",
        ".css.map"
      ],
      "images": [
        ".jpg",
        ".png"
      ]
    },
    "options": {
      "development": true
    }
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "autoprefixer": "^9.7.6",
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-custom-dist-structure": "^1.1.9",
    "postcss-modules": "^2.0.0",
    "sass": "^1.26.3"
  }
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Empty project</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./scss/main.scss" />
  </head>
  <body>
    <div id="app">
      <div id="banner">
        <img src="./images/banner-bg.jpg" alt="" />
      </div>
    </div>
    <script src="./js/main.js"></script>
  </body>
</html>

main.scss

#banner {
  width: 100%;
  height: 600px;
  background-image: url('../images/banner-bg.jpg');
}

preview

Parcel v2 support?

Hey @VladimirMikulic thanks for your work on this.

Are you able to confirm if this plugin works with parcel v2? I've installed the plugin and added a customDistStructure to my package.json but there are no changes to my output structure.

I am running parcel version 2.0.0-alpha.3.2.

Merge with parcel-plugin-structurize

Hey guys 👋 ,

I see this project does exactly (almost) what a plugin of mine, parcel-plugin-structurize, does.

I was wondering if we could merge the two into a new plugin? Also wanter to understand what types of input does this plugin supports, etc etc.

Cheers!

SCSS Hot Reload fails if options.development: true

Hi there, after scratching my head for awhile today to figure out why the hot reload was no longer working when I made changes to a scss file, I realized that my problems vanished when I set development to false and not have my folders structured while developing.

The styles do update however, if I save my entry file (index.html) in this case.

I am simply including the scss file in the index.html via tag.

Here are my configurations. Note that in this case, everything works as intended. However, if I change the options.development to true in the package.json file, then SCSS hot reloading no longer works.

package.json

{
  "name": "example",
  "version": "1.0.0",
  "description": "Example",
  "scripts": {
    "start": "parcel ./src/index.html --out-dir build/dev",
    "build": "parcel build ./src/index.html --out-dir build/prod"
  },
  "author": "Chuck Taylor",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "cssnano": "^4.1.10",
    "parcel-plugin-custom-dist-structure": "^1.1.3",
    "parcel-plugin-nuke-dist": "^1.0.1",
    "sass": "^1.26.3",
    "typescript": "^3.8.3"
  },
  "customDistStructure": {
    "config": {
      "scripts": [
        ".js",
        ".js.map"
      ],
      "styles": [
        ".css",
        ".css.map"
      ],
      "images": [
        ".jpg",
        ".png",
        ".svg"
      ]
    },
    "options": {
      "development": false
    }
  },
  "dependencies": {}
}

.browserslistrc

# Supported Browsers
defaults

.babelrc

{
  "presets": ["@babel/preset-env"]
}

postcss.config.js

module.exports = {
  plugins: [require('autoprefixer'), require('postcss-nested')],
}

The plugin "parcel-plugin-custom-dist-structure" has encountered an error.

"customDistStructure": {
"config": {
".css": "css",
".js": "js",
"fonts": [
".eot", ".ttf",
".woff", ".woff2"
],
"images": [
".jpg",
".svg",
".png",
".webp"
],
"images/**": [
".jpg",
".svg",
".png",
".webp"
]
},
"options": {
"development": false
}
},
Oh, snap!
The plugin "parcel-plugin-custom-dist-structure" has encountered an error. ⚠️

We apologize for inconvinience. 💖

TypeError: Cannot read property 'distribute' of undefined
at SVGSpriterQueue.remove (/media/islombek/84732b38-d372-4283-aab7-550172b13b8a/islombek/Projects/tailwind-parcel/node_modules/svg-sprite/lib/svg-sprite/queue.js:97:58)
at /media/islombek/84732b38-d372-4283-aab7-550172b13b8a/islombek/Projects/tailwind-parcel/node_modules/svg-sprite/node_modules/async/dist/async.js:473:16
at next (/media/islombek/84732b38-d372-4283-aab7-550172b13b8a/islombek/Projects/tailwind-parcel/node_modules/svg-sprite/node_modules/async/dist/async.js:5329:29)
at /media/islombek/84732b38-d372-4283-aab7-550172b13b8a/islombek/Projects/tailwind-parcel/node_modules/svg-sprite/node_modules/async/dist/async.js:969:16
at /media/islombek/84732b38-d372-4283-aab7-550172b13b8a/islombek/Projects/tailwind-parcel/node_modules/svg-sprite/lib/svg-sprite.js:200:9
at /media/islombek/84732b38-d372-4283-aab7-550172b13b8a/islombek/Projects/tailwind-parcel/node_modules/svg-sprite/node_modules/async/dist/async.js:473:16
at next (/media/islombek/84732b38-d372-4283-aab7-550172b13b8a/islombek/Projects/tailwind-parcel/node_modules/svg-sprite/node_modules/async/dist/async.js:5329:29)
at /media/islombek/84732b38-d372-4283-aab7-550172b13b8a/islombek/Projects/tailwind-parcel/node_modules/svg-sprite/node_modules/async/dist/async.js:969:16
at /media/islombek/84732b38-d372-4283-aab7-550172b13b8a/islombek/Projects/tailwind-parcel/node_modules/svg-sprite/lib/svg-sprite/transform/svgo.js:95:9

Incorrect dependency resolution after update in watch mode with public-url

Describe the bug
Got /static/fonts/MyFont.b9974724.woff instead of /static/assets/fonts/MyFont.b9974724.woff after save any css file in watch mode. Parcel started with --public-url=/static/. Initial build generates correct url for the font and all works fine until i save any css file.

I have project structure like this:

├── fonts
│   └── MyFont
│       ├── MyFont.woff
│       └── MyFont.scss
└── public
    ├── common.scss
    ├── index.pug

public/common.scss

@import url("../fonts/MyFont/MyFont.scss"); // "url" used to set relative path resolving from current dir instead of parcel entry file dir

fonts/MyFont.scss

@font-face
    ...
    url("./MyFont.woff") 

Desktop (please complete the following information):

• OS: Linux
• Parcel version: v1.12.4
• Plugin version: v1.1.10

Plugin configuration object:

    "config": {
      "pages": [
        ".html"
      ],
      "assets/js": [
        ".js",
        ".js.map"
      ],
      "assets/styles": [
        ".css",
        ".css.map"
      ],
      "assets/images": [
        ".jpg",
        ".png"
      ],
      "assets/fonts": [
        ".woff",
        ".woff2",
        ".eot"
      ]
    },
    "options": {
      "development": true
    }
  }

The image path in css doesn't replaced

// css/style.css
background:url(/my_prize.1b440f9c.png);background-size:contain}

Actually my_prize.1b440f9c.png is in /images/my_prize.1b440f9c.png, this is not a right path.

Ignore some files

Is there any way to ignore some files .. ie: favicon.png and apple-touch-icon.png, service-worker.js etc but put other similar files as structured??

Not working in npm7 workspaces

Describe the bug
NPM7 workspaces (and some other monorepository tools) use common node_modules in monorepository root

When we start npm run start from module dir - parcel-plugin-custom-dist-structure try to find node_modules in current folder and fail with error

Plugin parcel-plugin-custom-dist-structure failed to initialize: TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string....

like in issue16

How it happened?
Use it with monorepository with npm7 workspaces

Desktop (please complete the following information):

• Windows & MacOs

Plugin configuration object:
any configuration

Maximum call stack size exceeded

Hi! Just giving the plugin a spin against a project I'm working on and I get the following error when I run with the plugin installed:

Server running at http://localhost:1234
√  Built in 20.18s.
×  Maximum call stack size exceeded
    at Map.entries (<anonymous>)
    at Function.from (<anonymous>)
    at DependencyGraph.buildDependencyAssets (C:\MyProject\Publish\node_modules\parcel-plugin-custom-dist-structure\lib\DependencyGraph.js:51:36)
    at C:\MyProject\Publish\node_modules\parcel-plugin-custom-dist-structure\lib\DependencyGraph.js:62:14
    at Array.forEach (<anonymous>)
    at DependencyGraph.buildDependencyAssets (C:\MyProject\Publish\node_modules\parcel-plugin-custom-dist-structure\lib\DependencyGraph.js:53:22)
    at C:\MyProject\Publish\node_modules\parcel-plugin-custom-dist-structure\lib\DependencyGraph.js:62:14
    at Array.forEach (<anonymous>)
    at DependencyGraph.buildDependencyAssets (C:\MyProject\Publish\node_modules\parcel-plugin-custom-dist-structure\lib\DependencyGraph.js:53:22)
    at C:\MyProject\Publish\node_modules\parcel-plugin-custom-dist-structure\lib\DependencyGraph.js:62:14

The project has around 800 html & image files.

Plugin parcel-plugin-custom-dist-structure failed to initialize: TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string.

Hi Vladimir~

I updated to version 1.1.9 and got the following error message:

Server running at http://localhost:1234 ⚠️ Plugin parcel-plugin-custom-dist-structure failed to initialize: TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received type undefined at validateString (internal/validators.js:125:11) at Module.require (internal/modules/cjs/loader.js:685:3) at require (/Users/oberonlai/Sites/Hellowp/wp-content/themes/ods/node_modules/v8-compile-cache/v8-compile-cache.js:161:20) at Object.<anonymous> (/Users/oberonlai/Sites/Hellowp/wp-content/themes/ods/node_modules/parcel-plugin-custom-dist-structure/lib/index.js:8:19) at Module._compile (/Users/oberonlai/Sites/Hellowp/wp-content/themes/ods/node_modules/v8-compile-cache/v8-compile-cache.js:194:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:690:17)

It worked normally unless I removed the package-lock.json and reinstall the version 1.1.2. Could you help me to figure out what's happened? Thanks for help!

Wrong file path links in development mode

Hi Vladimir! I'm open a new issue as it's a different error. The plugin works when its first started, but once I save any changes the following error pops up:
You can find the test project here: https://github.com/clovis-rosa/landingpage_test

Server running at http://localhost:1234 √ Built in 54ms. × ENOENT: no such file or directory, rename 'C:\landingpage_test\dist\styles.164d45a1.css' -> 'C:\landingpage_test\dist\css\styles.164d45a1.css' at Object.renameSync (fs.js:675:3) at AsyncFunction.module.exports.sync (C:\landingpage_test\node_modules\move-file\index.js:61:6) at moveFileSync (C:\landingpage_test\node_modules\parcel-plugin-custom-dist-structure\lib\Utils.js:33:12) at FileProcessor.processFile (C:\landingpage_test\node_modules\parcel-plugin-custom-dist-structure\lib\FileProcessor.js:24:5) at C:\landingpage_test\node_modules\parcel-plugin-custom-dist-structure\lib\OutputGenerator.js:47:21 at Array.forEach (<anonymous>) at OutputGenerator.processFiles (C:\landingpage_test\node_modules\parcel-plugin-custom-dist-structure\lib\OutputGenerator.js:39:11) at C:\landingpage_test\node_modules\parcel-plugin-custom-dist-structure\lib\OutputGenerator.js:34:12 at Array.forEach (<anonymous>) at OutputGenerator.generateOutputFolder (C:\landingpage_test\node_modules\parcel-plugin-custom-dist-structure\lib\OutputGenerator.js:13:40) (node:22128) UnhandledPromiseRejectionWarning: Error: WebSocket is not open: readyState 2 (CLOSING) at WebSocket.send (C:\landingpage_test\node_modules\ws\lib\websocket.js:314:19) at HMRServer.broadcast (C:\landingpage_test\node_modules\parcel-bundler\src\HMRServer.js:110:10) at HMRServer.emitError (C:\landingpage_test\node_modules\parcel-bundler\src\HMRServer.js:63:10) at Bundler.bundle (C:\landingpage_test\node_modules\parcel-bundler\src\Bundler.js:350:18) at processTicksAndRejections (internal/process/task_queues.js:97:5) at async Timeout._onTimeout (C:\landingpage_test\node_modules\parcel-bundler\src\Bundler.js:817:7) (node:22128) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict(see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:22128) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

The only change I make in the JASON file was to address any "*.scss" file to "css" folder:

{ "name": "landingpage_test", "version": "1.0.0", "description": "Test project using 'parcel-plugin-custom-dist-structure' for ParcelJs.", "main": "index.js", "keywords": [], "author": "", "license": "ISC", "scripts": { "clean": "rm dist/bundle.js", "start": "parcel src/index.html", "build-prod": "parcel build src/index.html" }, "customDistStructure": { "config": { ".css": "css", ".scss": "css", ".js": "js", "images": [ ".jpg", ".svg", ".png" ] }, "options": { "development": true } }, "dependencies": {}, "devDependencies": { "parcel-bundler": "^1.12.4", "parcel-plugin-custom-dist-structure": "^1.0.3", "sass": "^1.26.3" } }

Cheers!

The "id" argument must be of type string

Describe the bug
When I run build script, it say: The "id" argument must be of type string.

How it happened?
I want to moving static resources to a separate folder. And when I run build script, it say: The "id" argument must be of type string.

Desktop (please complete the following information):

• OS: macOS
• Parcel version: v1.12.4
• Plugin version: v1.1.12

Plugin configuration object:

"customDistStructure": {
    "config": {
      ".js": "js",
      "img": [
        ".jpg",
        ".png"
      ],
      "css": [".scss", ".css"]
    },
    "options": {
      "development": true
    }
  }

Error trying to compile(SO - Windows 64-bit)

H! Vladmir, thank you very much for put your time on it!
I'm running a simple HTML, CSS and Js project on VSCode. It runs with no erros without the plugin, but once I try to run it after install the plugin the following error pops up:

Server running at http://localhost:1234 √ Built in 949ms. × Path contains invalid characters: C:\landingpage_test\dist\css\C:\landingpage_test\dist at checkPath (C:\landingpage_test\node_modules\make-dir\index.js:16:18) at AsyncFunction.module.exports.sync (C:\landingpage_test\node_modules\make-dir\index.js:108:2) at AsyncFunction.module.exports.sync (C:\landingpage_test\node_modules\move-file\index.js:58:10) at moveFileSync (C:\landingpage_test\node_modules\parcel-plugin-custom-dist-structure\lib\Utils.js:33:12) at FileProcessor.processFile (C:\landingpage_test\node_modules\parcel-plugin-custom-dist-structure\lib\FileProcessor.js:24:5) at C:\landingpage_test\node_modules\parcel-plugin-custom-dist-structure\lib\OutputGenerator.js:47:21 at Array.forEach (<anonymous>) at OutputGenerator.processFiles (C:\landingpage_test\node_modules\parcel-plugin-custom-dist-structure\lib\OutputGenerator.js:39:11) at C:\landingpage_test\node_modules\parcel-plugin-custom-dist-structure\lib\OutputGenerator.js:34:12 at Array.forEach (<anonymous>)

Here is my JSON file:

{ "name": "landingpage_test", "version": "1.0.0", "description": "Test project using 'parcel-plugin-custom-dist-structure' for ParcelJs.", "main": "index.js", "keywords": [], "author": "", "license": "ISC", "scripts": { "clean": "rm dist/bundle.js", "start": "parcel src/index.html", "build-prod": "parcel build src/index.html" }, "customDistStructure": { "config": { ".css": "css", ".js": "js", "images": [ ".jpg", ".svg", ".png" ] }, "options": { "development": true } }, "dependencies": {}, "devDependencies": { "parcel-bundler": "^1.12.4", "parcel-plugin-custom-dist-structure": "^1.0.2" } }

You can find the whole project in my GitHub: https://github.com/clovis-rosa/landingpage_test
Cheers!

Integration with parcel-plugin-compress

I use parcel-plugin-compress to produce compressed files scripts.js to scripts.js.br and scripts.js.gz, it works well, but I wanted them to be structured like following:

dist/
   js/
     scripts.js
     scripts.js.br
     scripts.js.gz

While I build, those two compressed files are missing, If I remove this plugin and rebuild then I got those files back but I don't want a flat directory structure.

My package.json config:

"customDistStructure": {
    "config": {
      "js": [ ".js",".js.map",".js.br",".js.gz" ],
      "css": [ ".css", ".css.map", ".css.br",".css.gz" ]
    },
    "options": {
      "development": true
    }
  }

Dynamic import throws error in production mode, but works in dev mode

I downloaded https://github.com/finmavis/parcel-boilerplate

I installed this plugin and parcel src/index.html then it works:

But if I build using parcel build and use a local static server https://www.npmjs.com/package/serve
serve
then dynamic import won't work: https://github.com/finmavis/parcel-boilerplate/blob/f175aee14830348538ff4295bc8a70038e0f660b/src/index.js#L6

If I remove this plugin's config from package,json and rebuild it again then this error is not present and working as expected.

Puts css in folder but does not link to it

Describe the bug
Thank your for this cool plug i!

adds a css directory but this breaks the link to the css
the image, js are generated as expected

should be

How it happened?
make dir for css, js, images

Desktop (please complete the following information):

• OS: Windows
  "parcel-bundler": "^1.12.4",
  "parcel-plugin-custom-dist-structure": "^1.1.16",

Plugin configuration object:
"customDistStructure": {
"config": {
".css": "css",
".css.map": "css",
".js": "js",
".js.map": "js",
"images": [
".jpg",
".png",
".gif",
".jpeg"
],
".fileExtension": "folder/in/dist",
"folder/in/dist": [ ".file", ".extensions" ]
},
"options": {
"development": true
}
}

Thank you
Peter

Error when using "parcel" package instead of "parcel-bundler"

Describe the bug
I have a complex project with React.lazy imports. I follow the instructions for config as explained in my package.json (only using the js and images options)

How it happened?
After installing the plugin and building, I get the error: The "path" argument must be of type string. Received type undefined

Desktop (please complete the following information):

• OS: Mac OS Catalina 10.15
• Parcel version: 1.2.1
• Plugin version: latest

Plugin configuration object:

"customDistStructure": { "config": { ".js": "js", "images": [ ".jpg", ".png" ] } }

Error when putting in css images

Hi!
Thnx for nice package!
I want to implement the next structure:

"customDistStructure": {
    "config": {
      ".css": ["css", ".jpg", ".png"],
      ".css.map": "css",
      ".js.map": "js",
      ".js": "js"
    },
    "options": {
      "development": false
    }
  }

But I get the error : sanitizedFolderName.startsWith is not a function.

Request information about readme enclosed image

Dear, I found your readme following a post on Dev.to
That's true your readme is very nice : great !
But I wonder how you added the image (cloud, package, etc.) in your readme ?
The only way I know are :
1 - commit an image in the repo, then call it with markdown syntax,
2 - call an image from Internet.
But, in your case, it seems you use
## :code: your title

Wrong absolute path for dependencies when public url specified

Hi. This is awesome plugin i really like it but i found it a bit strange that --public-url parcel param doesn't appear in resulting url. I looked at the plugin code and realised that this behavior is intentional.
So the question is how can i put public url in dependencies href or src? Should it be treated as a bug?

my config in package.json

  "customDistStructure": {
    "config": {
      "pages": [
        ".html"
      ],
      "js": [
        ".js",
        ".js.map"
      ],
      "styles": [
        ".css",
        ".css.map"
      ],
      "images": [
        ".jpg",
        ".png"
      ]
    },
    "options": {
      "development": true
    }
  }

Wrong path of imported image on build

Describe the bug
Imported image in js has wrong path after project build

How it happened?
Hi. Foremost let me thank you for such great plugin. I wouldn't use parcel without it)
Though I've encountered with one problem

In my js file need no import image.
Do it either in by import or require, result is the same
import img from '~/assets/images/main-page/map-point.png';

While in dev mode everything works fine, after build there is wrong path for this image:
file:///C:/Users/Kulak/Github/assets/images/map-point.b282edbe.png net::ERR_FILE_NOT_FOUND

All other images have correct paths, for instance:
file:///C:/Users/Kulak/Github/spbplod/docs/assets/images/big-logo.a8ec112d.svg

May be I just miss something to make this work for 100%?

Desktop (please complete the following information):

• OS: Windows 10
• Parcel version: 1.12.4
• Plugin version: 1.1.14

Plugin configuration object:

"customDistStructure": {
        "config": {
            ".js": "assets/js",
            ".js.map": "assets/js",
            ".css": "assets/css",
            ".css.map": "assets/css",
            "assets/images": [
                ".jpg",
                ".png",
                ".svg"
            ],
            "assets/fonts": [
                ".woff",
                ".woff2",
                ".ttf"
            ],
            ".fileExtension": "folder/in/dist",
            "folder/in/dist": [
                ".file",
                ".extensions"
            ]
        }
    }

parcel localhost breaks when customDistStructure is added to package.json

Describe the bug
When a customDistStructure is added to package.json the localhost from parcel breaks.

A solution would be that its only uses the customDistStructure when npm run build is used and not with npm start. The problem is that i don't know how I can achieve that.

How it happened?
when trying to run npm start or npm run build.

Desktop (please complete the following information):

• OS: [Windows]
• Parcel version: [1.12.5]
• Plugin version: [1.1.19]

Plugin configuration object:

"customDistStructure": {
"config": {
".js": "scripts",
".js.map": "scripts",
".css": "styles",
".css.map": "styles",
".html": "pages",

"img": [
".jpg",
".png"
],
"video": [
".mp4",
".mov",
".avi",
".flv"
]

},
"options": {
"development": true
}
}

[Suggestion] Join forces with 'structurize' and 'parcel-namer-rewrite'

It may be worthwhile getting in touch with a couple of other developers that are trying to develop Parcel plugins to solve the same problem as 'parcel-plugin-custom-dist-structure'. Perhaps you could all join forces and put together a single 'custom-dist-dir' plugin - which might make the job of maintaining and upgrading the plugin easier for you all.

There are a couple of projects I know of which are similar to 'parcel-plugin-custom-dist-structure', and which seem to be actively maintained:

• parcel-namer-rewrite
• parcel-plugin-structurize

Does it work for parcel version 2?

It was working with parcel-bundler (version 1).
I removed the parcel-bundler, and install parcel (version 2).
I didn't change any other config in my package.json, but it doesn't work now!
Now when I build, I don't have the files folder inside dist, only the dist folder is exist

"customDistStructure": {
  "config": {
    "files": [
      ".css",
      ".js",
      ".woff",
      ".png",
      ".jpg"
    ]
  }
}

Configure

Hi! My name is Andrew, I'm new to front-end development, in my projects I use parcel, and tried using your npm package , custo-dist and can't figure to make it work, simply i dont know to configure it and to start using it in my projects.

If you cand guide me in configure it , i'll apreciate your time and effort!

     Best wishes,
                Andrew

package json.zip

Desktop (please complete the following information):

• OS: Windows
• Parcel version: [1.12.5]
• Plugin version: [e.g. v1.1.17]

Plugin configuration object:
Your customDistStructure key in package.json.