search

fuse-box / react-example

71 stars 36 forks source link

I think this example is a good sell for ts & fuse-box #14

Open matt-erhart opened 7 years ago

matt-erhart commented 7 years ago

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).

nchanged commented 7 years ago

Its here https://medium.com/fusebox/do-you-really-need-babel-baa0971f1957?source=linkShare-189250fb2fb8-1505365833 :)

matt-erhart commented 7 years ago

Made some tweaks and added some comments here: https://github.com/matt-erhart/react_fusebox .

nchanged commented 7 years ago

You should read up on the options, like hashes for example, it's all there

matt-erhart commented 7 years ago

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?

nchanged commented 7 years ago

Sure! that might help, also with links to the documentation

matt-erhart commented 7 years ago

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]");
nchanged commented 7 years ago

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.