Thanks, finally a real substitute for webpack which was wrongly designed and hard for use from the day one. Obviously guys at Parcel know what programmers need.
Thank you Andrew for creating this great mini-course and sharing it for free! Amazing job for explaining parcel so thoroughly within just 20 minutes. 💪
Appreciate your courses on udemy Andrew...Your teaching methods are pretty awesome and i have enjoyed learning from you in almost all of your courses..Would be kind of cool if you put up some course/RUclips video regarding devOps stuff.Deploying code on linux server and maintaining stuff as a devOp..Thank you for your teachings✌
was having issued when the parcel builds the file, in build or prod the index file path of the scripts doesnt work i have to relink them without the forward slash in the begining,
I used that for a little project, but Why If I select multiple entry point in .php files it doesn't compile scss en js? in /dist directory I have just the php files... I want to use php files!
That was great bu how do we bundle together full script files. For example I want to bundle "navbar.js" and "script.js" into "iindex.js"? I think that should have been explained.
getting this error when i try to import images into js file: × Cannot read property 'js' of null at Bundler.createBundleTree (D:\Designs by Harp\Freelance-webdesign-development\Client-projects\Projects-2018\November\Cervini-bhatia\Development ode_modules\parcel-bundler\src\Bundler.js:650:39) at Bundler.createBundleTree (D:\Designs by Harp\Freelance-webdesign-development\Client-projects\Projects-2018\November\Cervini-bhatia\Development ode_modules\parcel-bundler\src\Bundler.js:692:12) at Bundler.createBundleTree (D:\Designs by Harp\Freelance-webdesign-development\Client-projects\Projects-2018\November\Cervini-bhatia\Development ode_modules\parcel-bundler\src\Bundler.js:692:12) at Bundler.createBundleTree (D:\Designs by Harp\Freelance-webdesign-development\Client-projects\Projects-2018\November\Cervini-bhatia\Development ode_modules\parcel-bundler\src\Bundler.js:692:12) at Bundler.bundle (D:\Designs by Harp\Freelance-webdesign-development\Client-projects\Projects-2018\November\Cervini-bhatia\Development ode_modules\parcel-bundler\src\Bundler.js:284:14) at process._tickCallback (internal/process/next_tick.js:68:7) Here is my js: import "../styles/index.scss"; import paperbg from "../images/2ndpaper.jpg"; here is the scss code: .hero{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; width: 100%; background: url('../../images/2ndpaper.jpg') center center no-repeat; } How to fix this? Thank you!
hey Andrew! Thanks for putting out this quick primer on Parcel! Quick question: I'm a huge fan on how you handle your css styling in your videos. I'm currently going through your React course and I'm working through the Redux section for the Expensify App. Going through the Indecision section, I loved the naming conventions you gave your CSS. Do you have a course where you go more in-depth in your styling? Or could you recommend specific resources? I've found stuff on BEM but it doesn't seem to follow the styling you employ. Thanks!
Oh no, sorry - I mean the actual naming convention of your css.. i think you mention BEM, but the resources I've found on it seem a little different than your naming conventions for your css classes.
There have a few issued when we run build script it have an error with not found script and css file we should change command to this one "build": "parcel build src/index.html --public-url ./ --out-dir prod" reference github.com/parcel-bundler/parcel/issues/470
Since it is only used in building, not at runtime, it would be a development dependency. If you install all dependencies, it doesn't really matter. I'm not sure when you wouldn't install all dependencies.
@@andrewjosephmead1 Thank you for clarifying that this syntax is related to "importing" I was confused. I am still moving through your Javascript bootcamp so I still feeling very incompetent. Thanks for your speedy response.
Having an issue: How to use multiple pages with parcel? Every time I go to ex: about.html its fine but when I go back to index.html then there's an issue. Here is the error: about.js:1 Uncaught SyntaxError: Unexpected token < script.7c337ef3.js:39 Uncaught (in promise) Error: Cannot find module '../node_modules/parcel-bundler/src/builtins/css-loader.js' at newRequire (script.7c337ef3.js:39) at newRequire (script.7c337ef3.js:23) at localRequire (script.7c337ef3.js:55) at Object.parcelRequire.styles/index.scss../..\images\2ndpaper.jpg (script.7c337ef3.js:110) at newRequire (script.7c337ef3.js:49) at localRequire (script.7c337ef3.js:55) at Object.parcelRequire.script/index.js.../styles/index.scss (index.js:1) at newRequire (script.7c337ef3.js:49) at localRequire (script.7c337ef3.js:55) at index.js:16 newRequire @ script.7c337ef3.js:39 newRequire @ script.7c337ef3.js:23 localRequire @ script.7c337ef3.js:55 parcelRequire.styles/index.scss../..\images\2ndpaper.jpg @ script.7c337ef3.js:110 newRequire @ script.7c337ef3.js:49 localRequire @ script.7c337ef3.js:55 parcelRequire.script/index.js.../styles/index.scss @ index.js:1 newRequire @ script.7c337ef3.js:49 localRequire @ script.7c337ef3.js:55 (anonymous) @ index.js:16 Promise.then (async) parcelRequire.0 @ index.js:16 newRequire @ script.7c337ef3.js:49 (anonymous) @ script.7c337ef3.js:81 (anonymous) @ script.7c337ef3.js:107 Here is the scripts from package.json: "scripts": { "dev": "parcel src/*.html", "build": "parcel build src/*.html --out-dir prod" } Here is the index.js: import "../styles/index.scss"; import "../images/2ndpaper.jpg"; import "../images/landing-arch.png"; import "../about.html"; What is wrong in the code? Thank you.
Maybe a better name for the exported method would be getFirstName. Then you would invoke it like: getFirstName("Andrew Mead") and the return value would be indeed "Andrew".
Hello Andrew. So you just barely covered the documentation of parceljs. Thank you. Could you explain why did I have to sit for a twenty minutes to wait, if you throw anything of an actual value? If you want to know why I'm so pissed off, I'm interested in one thing about Parcel.js. How do you specify an entry point, if you do not have index.html? Like a laravel application for example. I know you can specify a js file, however that will hardly allow you to benefit of the dev server. Any ideas? Why are these tutorials so rubbish? If you were such a great tutor, as so many suggest here, you would not only provided a decent tutorial on this, but would added some pinpoints to actual live use cases. As they say, if you can't do it - just teach it.
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/mqdefault.jpg)
so parcel is babel, sass, webpack, and live-server all rolled into one easy to use tool? Yes please! thanks for this video
I just love Andrew. Such a good and helpful instructor
Thank you for making a very clear and concise video on Parcel! I love the simplicity!
You are such a great teacher. I really enjoy your teaching style.
Thanks, finally a real substitute for webpack which was wrongly designed and hard for use from the day one. Obviously guys at Parcel know what programmers need.
The best teacher ever
Awesome! Thank you Andrew. I didn't expect you would make this mini-course. Greatly appreciated!
Your simple to the point teaching style has helped me understand the material covered. Thanks!
Thank you Andrew for creating this great mini-course and sharing it for free! Amazing job for explaining parcel so thoroughly within just 20 minutes. 💪
Well done, Andrew. Great job as usual.
Appreciate your courses on udemy Andrew...Your teaching methods are pretty awesome and i have enjoyed learning from you in almost all of your courses..Would be kind of cool if you put up some course/RUclips video regarding devOps stuff.Deploying code on linux server and maintaining stuff as a devOp..Thank you for your teachings✌
you are the best explainer!!!
Thanks a lot for this great introductory video of parcel :)
Thank You, Andrew your teaching style is top notch. Would you please do videos regularly at least once a month i will be glad to you?
Very well explained. Thanks for the video.
was having issued when the parcel builds the file, in build or prod the index file path of the scripts doesnt work i have to relink them without the forward slash in the begining,
Thanks i Learn many things from you 😊
Andrew what I already want to know about webpack before understanding Parcel?
I used that for a little project, but Why If I select multiple entry point in .php files it doesn't compile scss en js? in /dist directory I have just the php files... I want to use php files!
i get an error when running npm run dev.....src/js/index.js: Invalid Version: undefined
This would be great tutorial and Thankyou for making this video. I have small question here.
How can I use parcel bundles in wordpress project?
Thanks a lot for the reply I will work on your suggestion,
Thanks a lot once again.
That was great bu how do we bundle together full script files. For example I want to bundle "navbar.js" and "script.js" into "iindex.js"? I think that should have been explained.
Thank You Very Much! Really nice and helpful content!
getting this error when i try to import images into js file:
× Cannot read property 'js' of null at Bundler.createBundleTree (D:\Designs by Harp\Freelance-webdesign-development\Client-projects\Projects-2018\November\Cervini-bhatia\Development
ode_modules\parcel-bundler\src\Bundler.js:650:39)
at Bundler.createBundleTree (D:\Designs by Harp\Freelance-webdesign-development\Client-projects\Projects-2018\November\Cervini-bhatia\Development
ode_modules\parcel-bundler\src\Bundler.js:692:12)
at Bundler.createBundleTree (D:\Designs by Harp\Freelance-webdesign-development\Client-projects\Projects-2018\November\Cervini-bhatia\Development
ode_modules\parcel-bundler\src\Bundler.js:692:12)
at Bundler.createBundleTree (D:\Designs by Harp\Freelance-webdesign-development\Client-projects\Projects-2018\November\Cervini-bhatia\Development
ode_modules\parcel-bundler\src\Bundler.js:692:12)
at Bundler.bundle (D:\Designs by Harp\Freelance-webdesign-development\Client-projects\Projects-2018\November\Cervini-bhatia\Development
ode_modules\parcel-bundler\src\Bundler.js:284:14)
at process._tickCallback (internal/process/next_tick.js:68:7)
Here is my js:
import "../styles/index.scss";
import paperbg from "../images/2ndpaper.jpg";
here is the scss code:
.hero{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background: url('../../images/2ndpaper.jpg') center center no-repeat;
}
How to fix this?
Thank you!
great video. I keep getting doubles of every file? How to fix this?
@@andrewjosephmead1 every file - css, scss and javascript getting double of each in dist and prod folder. Also how to do code splitting?
how can I setup parcel and socket.io anyone plz?
hey Andrew! Thanks for putting out this quick primer on Parcel! Quick question: I'm a huge fan on how you handle your css styling in your videos. I'm currently going through your React course and I'm working through the Redux section for the Expensify App. Going through the Indecision section, I loved the naming conventions you gave your CSS. Do you have a course where you go more in-depth in your styling? Or could you recommend specific resources? I've found stuff on BEM but it doesn't seem to follow the styling you employ. Thanks!
Oh no, sorry - I mean the actual naming convention of your css.. i think you mention BEM, but the resources I've found on it seem a little different than your naming conventions for your css classes.
Awesome, thanks for the link!
does it have tree shacking ?
Andrew Mead I might look into it more thanks
There have a few issued when we run build script it have an error with not found script and css file we should change command to this one
"build": "parcel build src/index.html --public-url ./ --out-dir prod"
reference
github.com/parcel-bundler/parcel/issues/470
When we install @babel/plugin-proposal-class-properties, do we --save or --save-dev?
Since it is only used in building, not at runtime, it would be a development dependency. If you install all dependencies, it doesn't really matter. I'm not sure when you wouldn't install all dependencies.
please create a course on styled-components and web base component concepts
yes! please do Andrew!
I don't know why but when you add the "./" to the file path this really confuses me. Cant you just use "/" for the file path? Why add the "."?
@@andrewjosephmead1 Yes that's the line I'm referring to.
@@andrewjosephmead1 Thank you for clarifying that this syntax is related to "importing" I was confused. I am still moving through your Javascript bootcamp so I still feeling very incompetent. Thanks for your speedy response.
there is no need to install sass, parcel looks for the imports and it automatically installs them ...
nicely done
Just bought your javascript course on udemy. :)
Do we have to make install parcel in -g for everytime we create a new project and use parcel?
no, once that you installed it globally you can just use the parcel command
Having an issue:
How to use multiple pages with parcel?
Every time I go to ex: about.html its fine but when I go back to index.html then there's an issue. Here is the error:
about.js:1 Uncaught SyntaxError: Unexpected token <
script.7c337ef3.js:39 Uncaught (in promise) Error: Cannot find module '../node_modules/parcel-bundler/src/builtins/css-loader.js'
at newRequire (script.7c337ef3.js:39)
at newRequire (script.7c337ef3.js:23)
at localRequire (script.7c337ef3.js:55)
at Object.parcelRequire.styles/index.scss../..\images\2ndpaper.jpg (script.7c337ef3.js:110)
at newRequire (script.7c337ef3.js:49)
at localRequire (script.7c337ef3.js:55)
at Object.parcelRequire.script/index.js.../styles/index.scss (index.js:1)
at newRequire (script.7c337ef3.js:49)
at localRequire (script.7c337ef3.js:55)
at index.js:16
newRequire @ script.7c337ef3.js:39
newRequire @ script.7c337ef3.js:23
localRequire @ script.7c337ef3.js:55
parcelRequire.styles/index.scss../..\images\2ndpaper.jpg @ script.7c337ef3.js:110
newRequire @ script.7c337ef3.js:49
localRequire @ script.7c337ef3.js:55
parcelRequire.script/index.js.../styles/index.scss @ index.js:1
newRequire @ script.7c337ef3.js:49
localRequire @ script.7c337ef3.js:55
(anonymous) @ index.js:16
Promise.then (async)
parcelRequire.0 @ index.js:16
newRequire @ script.7c337ef3.js:49
(anonymous) @ script.7c337ef3.js:81
(anonymous) @ script.7c337ef3.js:107
Here is the scripts from package.json:
"scripts": {
"dev": "parcel src/*.html",
"build": "parcel build src/*.html --out-dir prod"
}
Here is the index.js:
import "../styles/index.scss";
import "../images/2ndpaper.jpg";
import "../images/landing-arch.png";
import "../about.html";
What is wrong in the code?
Thank you.
Jesus! Why didn't I know this earlier? Webpack is such a pain to configure
great video
Amazing Thank you!
Thakyou bro❤
Maybe a better name for the exported method would be getFirstName. Then you would invoke it like: getFirstName("Andrew Mead") and the return value would be indeed "Andrew".
Actually you don't need to install sass, just import the scss file and parcel does any needed install for you...
Cool
Funny this promise explanation. Just shows that the concept is being abused far too often.
Hello Andrew. So you just barely covered the documentation of parceljs. Thank you. Could you explain why did I have to sit for a twenty minutes to wait, if you throw anything of an actual value? If you want to know why I'm so pissed off, I'm interested in one thing about Parcel.js. How do you specify an entry point, if you do not have index.html? Like a laravel application for example. I know you can specify a js file, however that will hardly allow you to benefit of the dev server. Any ideas? Why are these tutorials so rubbish? If you were such a great tutor, as so many suggest here, you would not only provided a decent tutorial on this, but would added some pinpoints to actual live use cases. As they say, if you can't do it - just teach it.