elwin013 / parcel-reporter-static-files-copy Goto Github PK
View Code? Open in Web Editor NEWParcelJS v2 plugin to copy static files
License: MIT License
ParcelJS v2 plugin to copy static files
License: MIT License
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
.
parcel-reporter-static-files-copy/index.js
Lines 13 to 16 in 0ce37b5
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
.
src
.dist/
node-modules/
src/
|- assets/
|- utils/
|- main.js
|- index.html
.parcelrc
package.json
{
...
"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"
}
}
.parcelrc
content -
{
"extends": ["@parcel/config-default"],
"reporters": ["...", "parcel-reporter-static-files-copy"]
}
main.js
in index.html
- <script type="module" src="main.js"></script>
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.
npm install
npm run dev
The browser reports that it cannot connect to http://localhost:1234.
The Parcel development server runs as expected and index.html is served.
Follow these steps to get the Parcel development server to run again:
"reporters": ...
) from .parcelrcnpm 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.
localhost:1234
doesn't start at all.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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.