I think this example is a good sell for ts & fuse-box
matt-erhart opened this issue · 7 comments
If I understand the tsconfig correctly, you've basically replaced babel with ts AND made ts stop complaining. More people should know about this as it lets them code as if they we're in babel (and not get any ide complains/build errors), but add a ts file (maybe just some interfaces to get good hinting) here and there. This is like the incremental adoption sell from flow. I'd recommend making this example more prominent (maybe a blog post) and explaining it's benefits/inner workings in detail. (tsc may be faster/less bloated/easier to config than babel as well). I think that would get a lot more people to try out fuse-box and ts (and we can shift the standards to our liking...muwahah).
Made some tweaks and added some comments here: https://github.com/matt-erhart/react_fusebox .
You should read up on the options, like hashes for example, it's all there
Oh yea, for sure, work in progress. Those are mainly placeholders for me, but also so you know the things people won't know (but also, I didn't need to know to get it work). I think in general, this kind of over commenting the examples would help a lot of new folks. Maybe I could PR an over commented example sometime?
Sure! that might help, also with links to the documentation
Yea, links is a good idea. I'll ask some maybe dumb questions along the way, but that's probably what a lot of people (esp. with limit time) need.
Does hashing add a random-ish string to filenames? Why is this important?
Do I have this right?
output: "dist/$name.js", // $name comes from fuse.bundle('somename') e.g. "vendor" or "app". That name (perhaps with hashing) will be added by the htmlindex plugin to index.html.
For the bellow, what's the difference between an internal and external dependency (is it based on node_modules imports)? What's considered project/non-project files? Automatically execute '>' makes sense. For [], is it only including the index.jsx or is it also including it's non-node_module imports? Docs might need a bit more about what's happening behind the scenes with this for everyone to fully understand.
// ~ means 'Extract all external dependencies. Ignores the actual project files.'
vendor = fuse.bundle("vendor").instructions("~ index.jsx");
// > means 'Automatically executes a file on load'; [] means 'matches everything inside without dependencies'
app = fuse.bundle("app").instructions("> [index.jsx]");
Does hashing add a random-ish string to filenames? Why is this important?
no it's not random. That's a checksum, probably you need to read up on that, that's for cache busting - a regular practice in webdev.
Join gitter if you want to have a chat.