I don't (think I) have much of a problem with JS syntax, generally speaking, but I'm often baffled by the surrounding ecosystem of build tools and "helpers". There are a million tutorials, all doing things slightly differently without really explaining why, and stuff breaks so often...
Any recommendation for something covering that sort of thing (npm, yarn, webpack...) in a more structured and in-depth way than "here's how to make a todo list in 10 minutes with some magical command that may or may not still work 3 months later"?
I agree. Even just finding out what the tools are is ridiculously hard. Here's a list:
* NPM: Package / dependency manager. Also has some basic support for running scripts.
* Yarn: Very similar alternative to NPM.
* Babel: Transpiles modern Javascript to "old" Javascript, in case you need to support IE9 but want to use async/await or whatever. If you only support modern browsers you don't need this.
* Webpack: Originally it was for "bundling" Javascript files. You don't want to write all your code in a single file, but you often want to deliver it that way. Webpack reads the 'import' statements of all your files, and them converts them into a single file with emulated modules. Also helps when you are targeting a browser that doesn't support modules natively. However Webpack also comes with a load of "loaders" that can transform input files in various ways, e.g. allowing importing CSS files from Javascript, compiling Typescript, etc. So now it is kind of a big ugly build system.
* Node: The Javascript engine extracted from Chrome, plus a load of native APIs that let you do stuff you can't do in the browser because of security (write files, make TCP connections, etc).
* Electron: Basically Chrome plus Node. You can set it up so that your web pages can access the Node APIs inside Chrome, but you can also have them talk to an actual Node process via IPC.
A little npm actually goes quite a long way:
https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool...
https://github.com/keithamus/npm-scripts-example
Although you should probably prefer yarn these days (concepts should mostly transfer over).
As for tranformations/transpiling/minifying... You could use webpack - it is popular, but quite complex. I've found this a decent introduction to understand how it works:
https://www.freecodecamp.org/news/creating-a-production-read...
The good part about going that route, is that is quite explicit... You might get away with throwing out explicit in favour of convention - by using parcel instead:
https://github.com/parcel-bundler/parcel
(looks like gh readme is currently best entry point for 2.0 docs).
NPM is a pretty awful build tool really. In the only NPM project I work on we write a Python script as the build system, and the NPM scripts call that.
Don't really disagree with that. On the other hand, npm/yarn is generally a dependency you can't get away from - so if your needs aren't complex, I'd say in general, you're better off with a simple npm/yarn config, than pulling in another dependency.
Of course pulling in python in a python project is free, if python is tightly coupled to the js stuff anyway.
Often eg: the front end will be just js/ts - and reusable/useful without any python.
Yeah to be honest we don't use Python for anything other than the build system, but it is available on all our systems so it is easy to use, and I couldn't find anything better. I would have liked to be able to use Typescript, but there's no really good simple way to say "Node: compile and execute this typescript file, please don't save the output on disk anywhere, or try to read tsconfig.json or package.json or whatever".
I guess there's no native typescript support for nodejs (so npx is out). Maybe deno can help?
> Supports TypeScript out of the box.
Thats clearly a sort of "now you have two problems" type solution - but if there's a desire to stick with ts as a language - it might be helpful? (to drop the python dependency).
Ed: hm, there's apparently ts-node : https://github.com/TypeStrong/ts-node
npx ts-node script.ts