elwin013 / parcel-plugin-static-files-copy Goto Github PK
View Code? Open in Web Editor NEWParcelJS plugin to copy static files
License: MIT License
ParcelJS plugin to copy static files
License: MIT License
Thank you for this amazing plugin.
When i use this setup everything works fine:
"scripts": {
"build": "cross-env NODE_ENV=prod parcel build src/index.js --no-hmr -d ./wwwroot/dist",
"watch": "cross-env NODE_ENV=dev parcel watch src/index.js --no-hmr -d ./wwwroot/dist"
},
"staticFiles": {
"staticPath": [
{
"staticPath": "node_modules/jquery/dist/jquery.min.js",
"env": "dev",
"staticOutDir": "vendor"
},
{
"staticPath": "node_modules/jquery/dist/jquery.min.js",
"env": "prod",
"staticOutDir": "vendor"
}
]
},
But when i use an array instead for staticPath (which works with only one environment) :
"staticFiles": {
"staticPath": [
{
"staticPath": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"node_modules/bootstrap-select/dist/js/bootstrap-select.min.js",
"node_modules/autonumeric/dist/autoNumeric.min.js",
"node_modules/flatpickr/dist/flatpickr.min.js",
"node_modules/moment/min/moment-with-locales.min.js",
"node_modules/dropzone/dist/min/dropzone.min.js",
"node_modules/datatables.net/js/jquery.dataTables.min.js",
"node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js",
"node_modules/datatables.net-buttons/js/dataTables.buttons.min.js",
"node_modules/datatables.net-rowgroup-bs4/js/rowGroup.bootstrap4.min.js",
"node_modules/moment/dist/moment.js",
"node_modules/moment/dist/locale/da.js",
"node_modules/popper.js/dist/popper.min.js",
"node_modules/jzip/jzip.js",
"node_modules/jquery-validation/dist/jquery.validate.min.js"
],
"env": "dev",
"staticOutDir": "vendor"
},
{
"staticPath": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"node_modules/bootstrap-select/dist/js/bootstrap-select.min.js",
"node_modules/autonumeric/dist/autoNumeric.min.js",
"node_modules/flatpickr/dist/flatpickr.min.js",
"node_modules/moment/min/moment-with-locales.min.js",
"node_modules/dropzone/dist/min/dropzone.min.js",
"node_modules/datatables.net/js/jquery.dataTables.min.js",
"node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js",
"node_modules/datatables.net-buttons/js/dataTables.buttons.min.js",
"node_modules/datatables.net-rowgroup-bs4/js/rowGroup.bootstrap4.min.js",
"node_modules/moment/dist/moment.js",
"node_modules/moment/dist/locale/da.js",
"node_modules/popper.js/dist/popper.min.js",
"node_modules/jzip/jzip.js",
"node_modules/jquery-validation/dist/jquery.validate.min.js"
],
"env": "prod",
"staticOutDir": "vendor"
}
]
},
i get the following error:
node:12232) UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Array
at validateString (internal/validators.js:120:11)
at Object.join (path.js:375:7)
at processStaticFiles (D:\code\RiskLogic\Risklogic\node_modules\parcel-plugin-static-files-copy\index.js:177:39)
at Bundler.<anonymous> (D:\code\RiskLogic\Risklogic\node_modules\parcel-plugin-static-files-copy\index.js:195:13)
Running in VSCode on Windows 10 with Node.js version 12.19.0
Seems like the actual folder is not copied over to the dist folder? the plugin only grabs the content of the folder and throws them in the root of the dist folder...
Any possibility to input more options into the plugin to configure this, perhaps set a flag in package.js to be able to grab the whole folder and not just the content...?
"staticFiles": {
"staticPath": [
{
"staticPath": "src/img",
"staticOutDir": "img",
"watcherGlob": ["**/*.jpg", "**/*.png", "**/*.svg"]
},
{
"staticPath": "src",
"excludeGlob": "**/!(locales)/*.+(!(txt)|!(json))"
}
]
}
All the files are copied...
Hey
The latest release (with pull 22) seems to have affected parcel watch functionality.
Subsequent build messages are listed on new lines, such as:
✨ Built in 2.26s.
✨ Built in 6.45s.
✨ Built in 1.16s.
config.staticPath after handling conditionals: static
I assume this is due to the staticPath message adding a new line that the parcel cli doesn't know to delete.
This on it's own is trivial, but for some reason (I assume connected) this has also stopped automatic page reloads on each incremental build.
Hi,
I am using version 2.4.1 of this module to copy static assets into the parcel build directory. If parcel is running as watch, or if I manually do a subsequent build run without first clearing the previous files it fails with the following message:
....
(node:63300) UnhandledPromiseRejectionWarning: Error: EEXIST: file already exists, mkdir 'C:\project\wwwroot\images'
at Object.fs.mkdirSync (fs.js:905:18)
at processStaticFiles (C:\project\node_modules\parcel-plugin-static-files-copy\index.js:157:20)
at Bundler.bundler.on (C:\project\node_modules\parcel-plugin-static-files-copy\index.js:167:13)
at
(node:63300) 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(). (rejection id: 1)
(node:63300) [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.
I would expect it to just copy the files again into the directory even if it already exists. Would you agree with this? Hope this helps in resolving this one if you do.
Thanks and regards,
Andrew
Hello
Is this suppose to work for deployments too? Or just development?
When I run npm run deploy
on my project which runs parcel build src/index.html
, it doesn't copy the static images! But it does when I run npm run build
which runs parcel src/index.html
!
My package.json is like this:
{
"name": "bejebeje.elm",
"version": "1.0.0",
"description": "The Elm frontend for Bejebeje",
"main": "index.js",
"scripts": {
"build": "parcel src/index.html",
"deploy": "parcel build src/index.html"
},
"repository": {
"type": "git",
"url": "git+https://github.com/JwanKhalaf/Bejebeje.Elm.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/JwanKhalaf/Bejebeje.Elm/issues"
},
"homepage": "https://github.com/JwanKhalaf/Bejebeje.Elm#readme",
"devDependencies": {
"elm-hot": "^1.1.4",
"node-elm-compiler": "^5.0.4",
"parcel-bundler": "^1.12.4",
"parcel-plugin-static-files-copy": "^2.3.1",
"sass": "^1.25.0"
},
"dependencies": {
"app": "^0.1.0"
},
"staticFiles": {
"staticPath": "assets",
"watcherGlob": "**"
}
}
I install all packages.
"devDependencies": {
"@babel/preset-react": "^7.14.5",
"@parcel/resolver-default": "^2.0.0-alpha.3",
"@parcel/transformer-sass": "2.0.0-rc.0",
"npm-run-all": "^4.1.5",
"parcel": "2.0.0-rc.0",
"parcel-plugin-static-files-copy": "^2.6.0",
"terser": "^5.9.0"
}
Add in package.json from manual path
"staticFiles": {
"staticPath": "./public",
"watcherGlob": "**"
},
add in root public path.
But static file not to copy to dist dir.
What do i wrong ?
After updating to the latest version (2.3.4) I now get an error when building my project:
(node:142) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, copyfile '/opt/atlassian/pipelines/agent/build/assets/background_login.jpg' -> '/opt/atlassian/pipelines/agent/build/dist/client/assets/background_login.jpg'
at Object.copyFileSync (fs.js:1807:3)
at copy (/opt/atlassian/pipelines/agent/build/node_modules/parcel-plugin-static-files-copy/index.js:128:32)
at /opt/atlassian/pipelines/agent/build/node_modules/parcel-plugin-static-files-copy/index.js:99:25
at Array.forEach (<anonymous>)
at recurse (/opt/atlassian/pipelines/agent/build/node_modules/parcel-plugin-static-files-copy/index.js:90:41)
at recurseSync (/opt/atlassian/pipelines/agent/build/node_modules/parcel-plugin-static-files-copy/index.js:105:13)
at copyDir (/opt/atlassian/pipelines/agent/build/node_modules/parcel-plugin-static-files-copy/index.js:137:17)
at Bundler.<anonymous> (/opt/atlassian/pipelines/agent/build/node_modules/parcel-plugin-static-files-copy/index.js:163:17)
(node:142) 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:142) [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 settings in my package.json file are:
"staticFiles": {
"staticPath": [
{
"staticPath": "assets",
"staticOutDir": "assets"
}
],
"watcherGlob": "**"
}
Reverting to version 2.3.1 solves the issue.
Idea from pull request #12.
Issue reported by @adamduncan:
Files (especially data files) may have their contents changed, but still result in identical filesizes. E.g. JSON data could have GUIDs or certain integer values change, and bytes would remain the same.
And side note/fix idea by @adamduncan:
As a side note, would there be other comparisons to explore (e.g. file last modified timestamp?) that might result in a more definitive "has the file changed" check?
In the end I think it is good idea to check modification time instead of size.
I unsuccessfully tried to use the plugin today and finally found that it seems not to work with Parcel 2. At least it had absolutely no effect in my project, and @fregante seems to have made the same observation: parcel-bundler/parcel#1411 (comment)
I'm currently using multiple static paths to combine two folders (local folder & folder from a package) into a single output directory. Using the local folder as an override to the packages folder, to the most part this works fine, provided that local directory files are newer than the package, as the plugin just checks the files modified time, this however causes issue when package is updated.
It would be useful to have the option to configure the plugins conflict resolution based on the order of static paths instead of just using the modified time.
Think this also partially links to #46 when watching files, as it only watches the latest file on init and requires a restart to watch the other file.
However this maybe unique use case that could be out of the scope of this plugin, if so let me know?
If not, I'll try my best to set some time aside to attempt come up with solution and make a pull request.
While the plugin works perfectly on my Mac, in my windows machine is causing parcel-bundler to rebuild infinitely.
It keeps overriding the static files in "dist" folder.
I think it happens because the below statement always evaluates truthy.
if (destStat.mtime <= srcStat.mtime) {
// File was modified - let's copy it and inform about overwriting.
console.info( `Info: Static file '${filepath}' do already exist in '${bundleDir}'. Overwriting.`)
fs.copyFile(filepath, dest)
}
After logging the timestamps I found out that if I don't made any changes to my static files the timestamps match, being equal they overwrite the files causing the rebuild.
My quick fix was to remove the "=".
Although I don't know what kind of re-precautions this would cause in other OS.
if (destStat.mtime < srcStat.mtime) {
// File was modified - let's copy it and inform about overwriting.
console.info( `Info: Static file '${filepath}' do already exist in '${bundleDir}'. Overwriting.`)
fs.copyFile(filepath, dest)
}
Parcel allows the developer to specify multiple entrypoints. For example:
parcel build src/index.html src/404.html
When this is done, parcel-plugin-static-files-copy fails with an error on line 8 of index.js.
in the source folder, i have img and tpl folders
I need these copied as they are, into the dist folder (default output folder), so they'll look like
dist/img/img1.png
dist/tpl/template1.html
etc
Tried several ways, how can i achieve that?
Thanks
Hello! First of all, thank you for good plugin!
I don't like to populate my package.json
with many configurations of different tools. I prefer to keep them separate or in CLI command.
So, can you add option to specify another source of configuration? For example, separate file, CLI arguments or something else.
Thank you!
Based on #21
my package.json looks like this:
{
...,
"staticFiles": {
"staticPath": [
{
"outDirPattern": "**/dist-1",
"staticPath": "static/dist-1"
},
{
"outDirPattern": "**/dist-2",
"staticPath": "static/dist-2"
}
]
}
}
The plugin works fine and copy the right files inside right places but I receive the following warnings:
outDir matches '**/dist-1' so copying static files from 'static/dist-1'
outDir matches '**/dist-2' so copying static files from 'static/dist-2'
Hope this will help
Hello, first let me say that this plugin has been very useful to me since I started using it for my personal projects over the last year. Always does its job with no fuss or problems. Until now! :)
More detail below, but the core issue is: when I run npm start
in this repo the /dist
generated includes only some of the assets from my /static directory. It seems that it includes e.g. the favicon.png but not the forest.png, and this is presumably because favicon is referenced from the index.html whereas forest.png is referenced only in a .elm file. This issue started happening when I updated some dependencies (although not when I updated parcel-plugin-static-files-copy itself).
I first noticed the issue after I recently updated a bunch of dependencies in my template for my projects. The change I believe is relevant to this issue was moving from using my globally installed Parcel (which I believe was v1?) to a locally installed parcel set to 2.0. I did not update the parcel-plugin-static-files-copy dependency. I'm sure that before I did this parcel-plugin-static-files-copy was working as I expected: copying all the files in /static into dist, even if they were only referenced in a .elm file.
I have tried updating parcel-plugin-static-files-copy to its latest version (^2.6.0) and it did not help.
I have tried using both parcel-plugin-static-files-copy and parcel-reporter-static-files-copy (I'm not sure what the difference is supposed to be but both had identical results for me).
Any help would be greatly appreciated.
If you have a file without an extension in your public directory (e.g. localhost:1234/ml/pitchDetection/group3-shard1of1
), it serves the index.html file instead.
I have this problem that I have to often modify the source files that should be watched and overwritten by this package.
Rather frustratingly, after a few overwrites further edits don't appear to trigger new overwrites.
No errors/warnings in the output that I can see.
What could be causing it?
FWIW the file system is NTFS, and the debug server is parcel serve src/index.html
Non-array works:
{
"staticFiles": {
"staticPath": "public"
}
}
Array causes "TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string or an instance of Buffer or URL. Received an instance of Array" error:
{
"staticFiles": {
"staticPath": ["public"]
}
}
What is the problem?
Hi. Thank you for your work.
Now we are working on the second version of Parcel, with a redesigned plugin engine.
What do you think it will be difficult to update the plugin to work with the new version as well?
age_gender_model-shard1
age_gender_model-weights_manifest.json
face_expression_model-shard1
face_expression_model-weights_manifest.json
face_landmark_68_model-shard1
face_landmark_68_model-weights_manifest.json
face_landmark_68_tiny_model-shard1
face_landmark_68_tiny_model-weights_manifest.json
face_recognition_model-shard1
face_recognition_model-shard2
face_recognition_model-weights_manifest.json
mtcnn_model-shard1
mtcnn_model-weights_manifest.json
ssd_mobilenetv1_model-shard1
ssd_mobilenetv1_model-shard2
ssd_mobilenetv1_model-weights_manifest.json
tiny_face_detector_model-shard1
tiny_face_detector_model-weights_manifest.json
If I visit http://localhost:1234/weights/tiny_face_detector_model-shard1
, nothing will be downloaded, and nothing will show up.
But if I visit tiny_face_detector_model-weights_manifest.json
, I can see the JSON file instantly.
You can download those files in here:
https://github.com/justadudewhohacks/face-api.js/tree/master/weights
With the current v2.5.0
release, given the following config arrangement...
"staticFiles": {
"staticPath": [
{
"staticPath": "foo"
},
{
"staticPath": "bar"
}
]
}
...where foo
is a non-existent folder, plugin wont copy stuff from bar
.
Same works fine in v2.4.4
: foo
gets skipped, content of bar
gets copied as expected.
The plugin does not watch updates to the static folder. It does not copy files after they are updates. In my case it was JSON files.
Spin off #43.
Probably if there is more than one asset then only first one is watched. All should be watched instead.
after version up to 2.4.1. it keeps returning an error.
versions
[email protected]
[email protected]
PARCEL_WORKERS=1 NODE_ENV=production parcel build myapp/src/index.html --out-dir build
build/assets/images/favicon/site.webmanifest 117 B 65ms
(node:26) UnhandledPromiseRejectionWarning: Error: EEXIST: file already exists, mkdir '/myapp/build'
at Object.mkdirSync (fs.js:729:3)
at processStaticFiles (/silver-admin-web/packages/silver-admin-frontend/node_modules/parcel-plugin-static-files-copy/index.js:157:20)
at Bundler.bundler.on (/silver-admin-web/packages/silver-admin-frontend/node_modules/parcel-plugin-static-files-copy/index.js:167:13)
at process._tickCallback (internal/process/next_tick.js:68:7)
(node:26) 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(). (rejection id: 1)
(node:26) [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.
I have a setup where I am have one repo where I have multiple entry points. I want to package up each entry point's dependencies separately, and therefore I build each entry point to a different output directory. When using this plugin, the same set of static files end up in each dist directory. I would like it if I can configure it somehow to copy a different set of static files depending on either which entrypoint I am building, or which dist directory I'm building to.
(Currently I'm building one entrypoint which is a big heavy weight thing which requires all of the static files, and another entrypoint requires none of the static files, but those details are not too important to my question.)
Is there currently a way to do this?
Hi!
Problem:
Plugin produces logs to console on each build in development, like
Static file '...' already exists in '...'. Overwriting.
But in most my cases that's totally unnecessary.
Do you mind if I add the verbose
option (default is true
) to settings for turn off such messages?
Hi!
Is it possible to create the Output folder if it doesn't exists?
"staticFiles": {
"staticPath": [
{
"staticPath": "assets",
"staticOutDir": "assets"
}
],
"watcherGlob": "**"
}
On a production build i use clean Docker Container for building. So there doesn't exist an "assets" folder...
Would be great if i don't have to create the folder by another Script.
Br
Bernhard
Running the plugin together with parcel ^1.9.4 will yield the following deprecation message:
⚠️ `asset.package` is deprecated. Please use `await asset.getPackage()` instead.
I realize this isn't "Your problem" but -- I want to load a css file as a static resource without it being parsed by parcel (which has a problem with the css that antD generates for some reason) --- but if I include the link to the file (that I provide as a static resource) Parcel's bundler chokes because it can't find it at build time.
how do you use a resource from the static directory in your sourcecode?
e.g. I have an image in my static folder. I want to use it in my scss file..
what is the correct pattern ?
I think v2's conventions make it so this doesn't get picked up https://v2.parceljs.org/plugin-system/authoring-plugins/
I'm using this plugin to copy svg sprites and using them on a svg use tag. I've been using it in development without any issue, but failed when deploying to Netlify. Not sure about the cause.
Path to directory with static files should be possible to parameterize (instead of hardcoded static
directory).
When I run:
node_modules/.bin/parcel src/*/index.html
I expect my static files to be copied to dist
folder. Instead, it takes the first available bundle (e.g. src/a/index.html
) and copies all static files to its subfolder (here: dist/a
). It doesn't make any sense. How can I deal with this problem?
The reason is obviously in this line:
const bundleDir = path.dirname(bundle.name || bundler.mainBundle.childBundles.values().next().value.name);
Node 12.16.1
NPM 6.14.4
Parcel 1.12.4
Plugin 2.3.1
Windows 10
I have the following file structure:
Parcel is configured to generate code into dist/src
and I want to copy the files marked with *
into dist
. The only way I made this work was with this config:
{
"staticFiles": {
"staticPath": [{
"staticPath": ".",
"staticOutDir": "../"
}],
"excludeGlob": ["{.cache,dist,fonts,node_modules,src}/**", "!(manifest).json", ".gitignore"],
"globOptions": {
"dot": true
}
}
}
Couple of notes:
dot: true
was needed in order to exclude node_modules completely. Not sure why. No glob expert, but I would have expected this to match everything inside node_modules.staticPath
required to be an array here? If I just specify staticPath
as string, staticOutDir
is being ignored.This setup, however means, that every time my file-tree gets additions, which are not supposed to end up in the build, I'll have to manually add them to excludeGlob
.
I'd like to have the possibility to also specify single files to include rather than just directories.
Any chance for this to happen?
Less dependencies is always better. ;-)
Is it possible to stop logging "Static file '...' already exists in '...' . Overwriting." as it seems to be the expected behavior but logging it permanently while rebuilding?
the package https://github.com/douzi8/file-match depends on package https://github.com/douzi8/utils-extend both are from the same developer and utils-extend has a vulnerability. Both seem to be dead. Is there a plan to update this package as it seems to still be active?
Hello,
Is it possible to have a dev and production config?
Thanks!
At line 17, the Promise.resolve method is returning a Promise.
This cause a failure in reading pkgFile.staticPath property.
"await" or "then" should be used.
os: Windows 10
node: v8.11.3
parcel-bundler: v1.9.7My local fixes
Fix on getPackage() Promise await
// for parcel-bundler@>=1.9
pkgFile = await bundler.mainBundle.entryAsset.getPackage();
Fix on destination resolution (was broken on Windows)const copy = (filepath, relative, filename) => {
const dest = path.join(bundleDir, path.relative(staticDir, filepath));
[...]
}
There should be an meaningful error message when:
Is it possible to set target folder(s), like:
staticPath: { "source": "['/source/dir','/source/static']", "target": "['/target/dir','/target/static']" },
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.