6 Tips to Customize Parcel JS
ฝัง
- เผยแพร่เมื่อ 4 มิ.ย. 2021
- ParcelJS is a web app bundler that so some next-level magic. At it’s base, you give Parcel a file to watch and it will give you a dev server, minify and hash your files, and much more. It takes 30 seconds to set up-which is a huge advantage. Parcel, however, is opinionated. In this video, I’ll show you 6 tips to customize Parcel JS.
My full install guide to parcel: • A Beginner’s Guide to ...
1. Open by default
--open
2. Globs or multiple entry points
src/*.html
3. Change output directory
--out-dir public
OR
-d public
4. Change port
--port 1111
5. More detailed logs
--log-level 4
6. Disable source maps
--no-source-maps - แนวปฏิบัติและการใช้ชีวิต
Absolutely fantastic, and such an useful video! Single-handedly made me in love with Parcel. Subscribed, and rang the bell. Cheers!
Wonderful! Glad it was a help!
That's so useful. Thanks
You’re welcome!
Cool!! 👍👍
Nice, but what about organizing the dist-folder with sub-folder? In big projects it can become a nightmare to have everything in the same folder!
You should be able to provide more direction for your dist folder. Here’s some direction! parceljs.org/features/cli/
Thank you for video.
btw anyone knows how to create and use svg sprite in parcel with pug template engine? I'm trying to do it with 'parcel-plugin-svg-sprite' but still not figure out it yet.
I'll glad any tips.
Lazy load replaces img src to improve app performance. I applied in a project of mine with lazy load, and after parcel build and noticed that images are missing, I am sure that this happens because the img that I replace in my JS to lazy load imgs is now different since parcel changes file names...how to fix this?
Hmm. Are you using the loading=“lazy” attribute on the image tag to lazy load?
Can you please make a video on how to resolve the parcel vulnerabilities?
Hey, thanks for the comment! Do you just mean how to resolve the vulnerabilities when installing parcel?
@@CodinginPublic Yes, I tried 'npm audit fix' but it needs manual attention
Sorry you’re having trouble. You may want to try
npm audit fix --force
Because I’m not having trouble with it, it’d be hard to make a video. Also, since it’s more of an NPM thing, it would be worth checking this doc for more answers: docs.npmjs.com/cli/v7/commands/npm-audit
It may also be that the vulnerabilities are not severe and fine to leave for now (especially if just running a dev server). Hope that helps some?
@@CodinginPublic Hey thanks for quick response. So I'm new to the node js and the whole web ecosystem, so you're saying is as long I don't get any vulnerabilities in production environment and it just dev environment, its fine to go ahead with it right?
Sorry for my delay. While I don’t want to tell you to ignore vulnerabilities, for large and regularly used npm packages, you can usually trust that anything dangerous will be addressed. So you should be okay.
thank you for the video. +1 subscriber. i have a problem, i want to load new images to my website at certain width (ex:700px) using javascript, when i change the src in the js file, it doesnt work. i need help
Thanks, @person zen. And I think that makes you #100! :)
My guess is it’s a reference problem? Make sure you’re referencing stuff probably relative to your JS file. So if the images are in the same directory as your JS file and on the same level (i.e., not in a separate folder), you should be able to do something like ‘./image1.jpg’
That period is important. It says to look in the same area of the directory as the JS file.
That’s my guess? If you want me to look, feel free to throw it up on GitHub or codepen. You can post that here or shoot me a DM on Twitter (link on channel). Hope that helps! Thanks for the sub!
@@CodinginPublic thank you for the reply. Happy to be the 100 sub, u deserve more.
I fixed the problem by importing images.
stackoverflow.com/questions/48365710/loading-images-dynamically-with-parceljs
Cool! Thanks for the update and the kind words!