My LIGHTWEIGHT build tooling setup
HTML-код
- Опубликовано: 10 сен 2024
- This week we are talking build tooling!
Node: nodejs.org
Rollup docs: rollupjs.org/g...
Modules used: rollup, rollup-plugin-replace, rimraf
npx: www.npmjs.com/...
IIFEs: benalman.com/ne... (turns out it was 2010!)
Http-server: www.npmjs.com/...
Caches API: developer.mozi...
And yep you can do const { version } = require("./package.json"); in the Rollup config, but, you know, code readability etc.
What up, team! Let's talk build tools. Drop your suggestions for everyone.
Few years ago I tried to build a tool to solve typical web dev problems: a preprocessor github.com/hblend/hblend
SWs please ^____^ workbox, i guess?
Parcel is a great build tool with zero configuration. It does all your babel stuff by default, although it does not support webcomponents, so you need to include polyfills yourself
Gonna be a bit cheezy but the best tooling is no tooling :)
+1 for the advanced video
Paul's a RUclips natural. Love it.
Would love an episode on service workers and to see an advanced video of your tooling. Thanks!
I want to see more about that caching stuff you were doing
What is cool about npx is that the version of the depency is local to that project, so it is not a matter of how much you use roll-up but more a matter of having the version that works with your config for example. By the way love the videos
Great Paul!
Thank you for the video!
Whating for a video on SW and offline tips!
Haha loved the npm install montage Paul, this minimal, keep it simple kind of setups speak to my soul, i hope to see the javascript community thrive more toward this direction.
Thanks for doing your part !
Hi paul, we miss your live coding videos, can you please make a weekly series, we learn tons from you, thank you.
Brace yourself: UNSOLICITIED SURMA CODE REVIEW
- Don’t use npx in your npm scripts, you don’t need it (but if you do, declare it as a dependency)
- I prefer cpx over rsync because you can declare it as a proper dependency
My personal npm module go-tos:
- npm-watch for that auto-rebuild goodness
- rollup-plugin-terser for es6-compatible minification
- rollup-plugin-loadz0r for code splitting that just works
- husky to auto-install git commit hooks, so you can make sure your linter passes before you commit.
Way to make it complicated [rolls eyes]
Thanks Surma. No really. Thanks.
This is great Paul!!! I learn so much with your videos.
Please post the advanced video.
One of the most informative JS videos I’ve seen in quite a while. Great video Paul, and thank you! :)
This is great! can't wait to see the next one!
Really cool Paul! I always thought that your tooling would be something so complex. It would be so helpful a video about the next steps and also about service worker. I really admire you, Surma and Jake for all your crazy skills!
Don't get me wrong, complexity finds me like it finds all of us. I just try and fight back a little because otherwise, when it fails (it always does!), I waste a lot of time.
I personally don't care about webpack vs rollup but this one time I tried to use a web assembly module in my js app but webpack couldn't compile it properly. That's when I realised that knowing both is a good idea(for me).
Yeah if I could avoid build tools I would. Part of modern web dev tho
Paul, thank you for your videos! Can't wait to see episode about SW :)
coming from MPJ's channel and I like it so much here! great style of presentation, concise explanations and just your personality. and the video itself made me want to try rollup instead of webpack
Welcome! 👍
service worker please :)
Gotta say, love the creative entro/outtro that you have in your videos...also, awesome content. Glad you collaborated with MPJ and I got exposed to your channel, immediately subscribed!
Welcome! Thanks for coming by :)
Nice video @Paul Lewis, in can change your config to: const { version } from './package.json'
Of course! Great shout :)
Awesome video Paul! Love the tip to tie the package version to the cache!
Nice video! Waiting on the advanced video on build tooling setup now 🙌
++ for the next(advanced) version of build tooling
rimraf 🤣😂
Fantastic Paul, waiting for the advanced one👏👏👏
Love your videos, and I see people asking about the advanced version, but man I need to get a book on node or something. I've never used it, and that seems to be your technology of choice.
For builds it is, and a go-to for most folks in front end work. While it does have its own quirks, a good grasp of JavaScript will get you a long way.
the best intri
Don't you worry. I have read all the comments and there are more than 1000 people asking for service workers. I think you should do it.
Rollup's pretty cool 🙂 I used it a couple times, but these days I'm giving Parcel a go. The no-config thing is 👌🏽but you can't do stuff like replace version numbers at build time. Also, I'm a glutton for service worker/caching stuff -- I watch from afar, but never actually put a SW into production -- so bring it on in the next video 😁
Well it might not be the _next_ video... ;)
Loving this stuff.
So because i am lazy, i use polymer for most of my front-end work and just build with the polymer build tool. I like this way too though . . . Thanks! Can't wait to learn more.
Nothing wrong with that! Whatever gets you shipping is 👍
loved the web diary series you did on chrome dev. Would love to have more of those here.
Good to know :)
Yes please, advanced tooling
Great show, Paul :) would love to see a code session where u are making nice and smooth animations with the FLIP method
Funnily enough I will being doing that in the next video ... I think
Keeping It simple? I can not wait for the complex versión :D
I mean, yes? Hope it _was_ simple enough!
@@aerotwist simple but frontend has a lot of accidental complexity, hundreds of dependencies (libraries, tools, services, tecnologies...)
Agree, which is why I try and keep it minimal.
@@aerotwist It is so hard having only one framework or a project layout... One year later It becomes obsolete.
@@aerotwist btw, nice video
Informative and entertaining, I like it! What about dev server with HMR in rollup? Also, doesn't the browser already cache img and other assets? Would be nice to see more on caching.
Would love to see hashes, vendor chunk, done using Rollup!
one video on the cache
More more more videos like this!!!!
Can't stand the open editors pane you can hide with "explorer.openEditors.visible": 0,
You said A, now you have to say B (Don´t know if the saying is the same in english as norwegian :P), but, yeah, please do the tooling next steps video. And also service worker one. We want all of it! :)
I guess the equivalent is "I've started so I'll finish"? :)
When’s the XHTML tutorial coming Paul?
Great video, Paul! Great to see what you did with bumping the package version (I do remember you and Jake did something similar in the 'Big Web Quiz' repo. Question do: let's say you want to ship every patch/minor/major, how do you usually follow up? For example, the manual way: zip the dist folder and add it to GitHub as a release. Anything you can recommend on the 'shipping' part?
It really depends on where the code is hosted. Normally I have a "release" script that bumps the version (normally patch given that I deploy lots!) and does whatever the deploy process is, which is -- say -- push to GitHub pages, or Google Cloud or whatever. Sometimes the deploy is to package with Docker and deploy that. It really depends.
Handle typescript, dynamic imports (experimentalCodeSplitting) and minification (terser)
import typescript from 'rollup-plugin-typescript2';
import { terser } from 'rollup-plugin-terser';
let defaults = { compilerOptions: { declaration: true } };
let override = { compilerOptions: { declaration: false } };
export default {
input: ['app/js/index.ts'],
output: [
{
dir: 'public',
format: 'es',
sourcemap: false
},
],
plugins: [
typescript({
tsconfigDefaults: defaults,
tsconfig: 'tsconfig.json',
tsconfigOverride: override
}),
terser()
],
experimentalCodeSplitting: true,
};
I am on windows, what should I use instead of rsync?
Adv. version please, i love to see others build tools
Hi paul! I like the background music
You should check out Epidemic Sound then! :)
Wow! thanks Paul
No probs - enjoy!
Oops clicked on one of your video’s by mistake oops me thinks this isn’t Paul Irish. Best mistake I have made in a long time. Naming my events Womble extends Wobble
English version of Dean Pelton from community! The resemblance is uncanny!
I have no idea who that is! 😂
Does that string interpolation in the log function work in old browsers?
Depends on what you mean by old. IE, no, but I think every other browser yes
Great video as always, that is perfect for starting up without losing a lot of time figuring out how to build stuff. What about css files, do you use some build process for concatenate them or just use one single styles and have fun with it? I suppose you do not use some preprocessor for that kind of projects, is that right?
Right. If I did it would be Sass, but even then I keep it minimal, like importing mostly
@@aerotwist Coolio, make sense. Maybe it's more advanced setup, but what about watch settings? Do you use nodemon for that?
I tend not to watch, honestly. I find I do a heap of changes and want to refresh completely.
@@aerotwist I see, make sense them. It seems a pretty smart way actually, because you need to be confident that your change will work. That is not my case :)
Thanks for the suggestions Paul, really great content.
I lately found out that parcel is really removing a lot of overhead for very simple things, like prototyping.
Definitely. I found it hard to configure and extend, and if it doesn't fit you might struggle, but yeah if you fit the bill then it's a great choice!
Instead of http-server i prefer python SimpleHTTPServer, because it built in OS (linux) and don't need install yet another node package :D
The challenge I've had with that is when the folder is recreated it gets confused, it doesn't support gzip, and it has been known to hang for me on Mac. Hopefully it plays nicely for you!
Please create a videos on How to create chrome extension using webpack or roll up, Vue, React. Please
I think just adding --delete as an option to rsync should be equivalent to deleting the build directory.
I'm taking a whole course on Webpack because I feel like I should just bite the bullet and get good at the thing. I'm a web dev beginner
Enjoy! :)
What are your thoughts on ParcelJS?
It's great. It's also magical, and I like magic when it works. When I need to go custom it is less good for me personally.
Hey paul can u tell me how to hide "X-powered by Express" in network devtools in chrome
Sounds like a header that express is adding. You'd need to delete the header on the server side
@@aerotwist So should I say app.set("X-powered-by",false)
If that's how you unset a header, yep. TBH I've not done it in a while
app.disable('x-powered-by');
(see expressjs.com/en/4x/api.html#app.settings.table)
What is your criteria on using single quotes vs double quotes?
Be consistent 👍 I fail at that sometimes! 😂
For the sake of minimalism I like to use no build tools whenever possible.
For example github.com/robinlinus/snapdrop/
`process.env.npm_package_version` is another way to retrieve the version tag.
I tried and couldn't get it to work :(
You should check poi.js. It is project started as a quick start for Vue.js with minimum configuration, but it is so much more powerfull. You can run react apps on it, typescript works well with just one plugin installed. github.com/grzegorzmoskal/webapp-boilerplate/ check out this repo i worked with my friend. It has everything you want for a serverless app, but has close to zero config of Poi.js
Yarn would have been about 10x faster 😏😘
So service workers next?
A nice quick topic 😂👍
@@aerotwist you could make a playlist, how exciting's that?
npm install #time 💖 it
It's a lot better than it used to be, but I couldn't resist a little nod to it.
i left nodejs and went to golang backend/webserver with webcomponents.org... but wait WebAssembly in Go :) #lovethisvideos
Can you share your codes in github?
Eventually! Though in this case there really isn't anything to share?
You don't show all steps. And I think it will be hard to setup all stuff correctly for novices. Or, you can show all steps simply.
"i'll link it below"... uh where?
What did I forget to link?
rollup documentation and npm
They're in the description, bud
RIP. I clicked show more and nothing loaded. Thanks obama.
Is it working now? That's a bummer if not!