elwin013 / parcel-reporter-static-files-copy Goto Github PK

When adding a file like a manifest.json for a Chrome extension to the static files, it's successfully copied to the dist folder. Unfortunately, if I make any changes to my manifest.json while Parcel is in watch mode, the file is not re-copied. The same applies to my icons folder; if I change an icon, it won't be re-copied over.

While I understand that static files are generally files that need fewer changes over time than files that are considered dynamic, they do sometimes need to be changed. So it would be really nice to have it just work.

I'm wondering though, is this a limitation of this plugin or of Parcel itself? If it's just the plugin's limitation, I'd love to see it as a feature or possibly help make it a feature.

Hello,

I have noticed that the --dist-dir command argument given to parcel is always ignored.

After searching the cause of this issue, I have noticed that options.distDir is always undefined.

Indeed, options.distDir does not appear on the interface PluginOptions.

This forces to define staticFiles.distDir in package.json, even when it should be the same as the command argument --dist-dir.

I'm not sure whether this bug is related to parcel-reporter-static-files-copy or parcel, but I can't find a way to get distDir from the options object.

Have a nice day,
Gautier

The plugin depends on @parcel/plugin. But I presume it should be a peer dependency. Shouldn't it?

BTW: thanks for the plugin, it's simple but amazing ❤️

I have a use case where my static file that I want to copy, is located in the same directory as the target index.html file. As I don't want to copy the index.html file, which is processed by parcel, it would be nice to copy only that single file or alternatively ignore the index.html in the target directory.

I am in a similar situation to #20.
I have my index.html file inside the static folder. And I don't want to copy the index.html file, which is processed by parcel and copied to dist. It would be nice to ignore the index.html in the target directory.

I have tried the single file example, and it just gave me parcel-reporter-static-files-copy missing error.

Steps to Reproduce

1. Have your index.html inside src.
   Your project structure should look something like this -

   dist/
   node-modules/
   src/
     |- assets/
     |- utils/
     |- main.js
     |- index.html
   .parcelrc
   package.json
   

2. package.json should be -

   {
     ...
     "source": "src/html"
     "scripts": {
         "start": "parcel -p 8000",
         "prebuild": "rm -rf dist",
         "build": "parcel build"
     },
     "devDependencies": {
         "parcel": "^2.8.2",
         "parcel-reporter-static-files-copy": "^1.5.0"
     },
     "staticFiles": {
         "staticPath": "src",
         "distDir": "dist"
     }
   
   }
   

3. .parcelrc content -

   {
     "extends": ["@parcel/config-default"],
     "reporters":  ["...", "parcel-reporter-static-files-copy"]
   }
   

4. Include main.js in index.html - <script type="module" src="main.js"></script>
5. Running npm start results in some dependency resolution error in browser.

After installing parcel-reporter-static-files-copy plugin on Parcel Beta v3 or nightly builds, the plugin disables Parcel's development server capability (i.e. parcel serve does not respond to the browser with any content, although builds pass just fine.

Connection refused is received in the browser.

Using this with parcel 2.0.0-beta.1, the plugin is attempting to copy the static files to an invalid path.

This seems to be because options.distDir is an absolute path which for a file foo results in:

/project/root//project/root/dist/foo

Here is my code in style.css

.bg {
  background: url(/static/trans.png);
}

and this is my code in package.json

"staticFiles": {
    "staticOutPath": "static"
},

when I run build, I've got this file structure:

dist
┣  static
┃  ┗  trans.png
┣  index.html
┣  index.b7c6ce25.css
┗  trans.b4cbf0ae.png

there are two trans.png indeed, and trans.b4cbf0ae.png is used by CSS but not the one in static folder, here's the code in the compiled CSS file index.b7c6ce25.css:

.bg{background:url(trans.b4cbf0ae.png)

It seems the plugin only doing the copy work but not actually using the files, is there any step I've missed?

I'm running my parcel build in a directory named "hype" but it's looking for the static folder 2 folders up from where I need it to.. resulting in the error in the log here:

➜  hype git:(main) ✗ npm run clean && npm run build

> [email protected] clean
> rimraf dist


> [email protected] build
> parcel build

✨ Built in 1.98s

dist/index.html               549 B    16ms
dist/index.16d576fc.js     511.7 KB    14ms
dist/index.b29bc0d1.js    511.34 KB    17ms
Error: ENOENT: no such file or directory, scandir '/home/hayesmaker64/Workspace/chilli-os/static'
    at Object.readdirSync (fs.js:1043:3)
    at recurse (/home/hayesmaker64/Workspace/chilli-os/packages/hype/node_modules/parcel-reporter-static-files-copy/index.js:68:8)
    at recurseSync (/home/hayesmaker64/Workspace/chilli-os/packages/hype/node_modules/parcel-reporter-static-files-copy/index.js:82:3)
    at copyDir (/home/hayesmaker64/Workspace/chilli-os/packages/hype/node_modules/parcel-reporter-static-files-copy/index.js:53:3)
    at Object.report (/home/hayesmaker64/Workspace/chilli-os/packages/hype/node_modules/parcel-reporter-static-files-copy/index.js:33:9)
    at ReporterRunner.report (/home/hayesmaker64/Workspace/chilli-os/packages/hype/node_modules/@parcel/core/lib/ReporterRunner.js:105:33)
    at async Parcel._build (/home/hayesmaker64/Workspace/chilli-os/packages/hype/node_modules/@parcel/core/lib/Parcel.js:446:7)
    at async Parcel.run (/home/hayesmaker64/Workspace/chilli-os/packages/hype/node_modules/@parcel/core/lib/Parcel.js:275:18)
    at async run (/home/hayesmaker64/Workspace/chilli-os/packages/hype/node_modules/parcel/lib/cli.js:374:7) {
  errno: -2,
  syscall: 'scandir',
  code: 'ENOENT',
  path: '/home/hayesmaker64/Workspace/chilli-os/static'
}
➜  hype git:(main) ✗ 
➜  hype git:(main) ✗ pwd
/home/hayesmaker64/Workspace/chilli-os/packages/hype
➜  hype git:(main) ✗ 

this is my config:

.parcelrc

{
  "extends": ["@parcel/config-default"],
  "reporters":  ["...", "parcel-reporter-static-files-copy"]
}

package.json

  "staticFiles": {
    "staticPath": "./static",
    "staticOutPath": "./assets"
  },

I don't think I need the staticPath in package.json because it should look in static by default - but I get the same error either way.

Steps to reproduce

1. Clone this repo
2. Run npm install
3. Run npm run dev
4. Open http://localhost:1234. the default server URL, in your browser

Actual result

The browser reports that it cannot connect to http://localhost:1234.

Expected result

The Parcel development server runs as expected and index.html is served.

Other notes

Follow these steps to get the Parcel development server to run again:

1. Remove line 3 ("reporters": ...) from .parcelrc
2. Run npm run dev

Hi all,

Appreciate your work on this - really useful plugin!

But I ran into an issue when using it for a project where the designated static folder didn't contain a folder itself i.e. just files.

I was able to replicate this issue by deleting the "magic" folder from within the customOutInDistFolder from within your examples.

By taking a brief look at your code, it seems that if there isn't a directory present, then when copy is called within copyDir mkdirSync is never called resulting in an ENOENT error - since there is no target directory to transfer into.

I may be way off the mark with this if this is the intended behaviour: if so, it might be worth mentioning the required folder structure in the README to avoid other users encountering this error.

Thanks again!

I just want to say thank you for writing this plugin. I was unsatisfied with the built-in parcel image transformer and its heavy dependency chain, and this plugin has simplified my build a lot.

Thanks! 🥇

I set this up to copy a logo.png file from the static directory. That logo image is sourced by HTML generated at runtime by an Elm app. This works fine for the production build -- dist/logo.png is created and is served as needed at runtime as a static file by the production web server. But parcel serve does not serve the file and so I get a broken image. If I run curl http://localhost:1234/logo.png I get an HTTP 200 response with the contents of my entry index.html file. What can I do to get this static file to be served properly by parcel serve?

Have you figured out a way to access the copied static assets at runtime when running Parcel 2's dev server? As far as I can tell it seems to only allow the loading of assets that have been imported somewhere in your code (and are therefor part of its asset graph).

In our usecase, we need the file to be copied to the build statically, but we also need the option to prepend the --public-url from parcel to the script tag's src.

A configuration like the following doesn't work, attempting to copy files from a subdirectory. In this example, only the content of real-static should be copied, not the content of static). However, the plugin will create an empty static directory in the dist folder and not copy any files from real-static.

"staticFiles": {
	"staticPath": "static/real-static",
	"staticOutPath": "static"
},

To double-check the issue, I've replaced the copying functions of the plugin with functions of that I know they work, and that did solve the issue for me. So I assume the bug is somewhere inside copyDir/recurseSync. Maybe we could use some better tested copy functions instead.

Is there a solution to support multiple source-destination like v1?

"staticFiles": {
        "staticPath": [
            {
                "staticPath": "assets/robots.txt",
                "staticOutDir": ""
            },
            {
                "staticPath": "assets",
                "staticOutDir": "assets"
            }
        ],
        "watcherGlob": "**"
    },

I've just tried your plugin with "parcel": "^2.0.0-nightly.400".
It works as described when running the build command, and would therefore be ideal for our CI pipeline.

However, when running the start command, which executes "parcel src/ts/index.ts --port 1234 --no-cache --target app", it fails silently.

• The parcel server at localhost:1234 doesn't start at all.
• I need the Parcel server to start as it serves all the CSS/JS for our local .NET development environment.

When I remove your plugin, this is my terminal output, showing server starting OK:

I notice in your code that the static file copying is performed when (event.type === "buildSuccess").

Is there a way to prevent your plugin "firing" at all when running start command?

Use the resolved destination path and relative path, rather than a string-replacement, which fails on windows environments, because filepath.replace(copyFrom, copyTo) does not play nice with '\'-characters.
Fixed in #18