What are we trying to do here?
Commencing fundamental, our first requirement would be to take our application signal, package it into one (remember: staying simple here) file, and output it someplace. Then we can guide the production box in a draw.
It may sound like an exercise in concentration. But to get diverted by concatenation is always to skip the genuine thrust of that which we require to do: make our code modular and handle dependencies.
You’ll be able to depend on this
We create code, and as we write it, pieces (I’m not going to say modules just yet because that comes in a minute hang on) of our signal need additional pieces of code from other locations. These needed things dependencies might be inside our code-base or external to it.
A primary task is not merely to smoosh all our code together in a package, but to resolve and weight the dependencies it needs as part of that procedure.
That means we require to be able to research the dependencies we need in an approach the packaging tool understands, and the machine wants to realize the best way to find them. Not only that, our signal and also the signal of our dependencies has to be modularized in the correct form, or our tool will trend quit.
Keeping it contained
That is, our signal and its dependencies need to utilize the appropriate module format. It is good when everyone is in the same uni-Verse and gets along correctly, as in the event of integrating pm modules together with the modern browser if tool.
Browserify may appear so simple and enchanting. Require pm segments that you need in your code identical to in node, then bundle it up and, whammo, it spits out software that works in the browser. So far, so amazing.
But the code is modularized and written in the different way AMD, UMD, CommonJS or never. Some of it may be ES6 (JS 2015 to the awesome kiddies), which we require to transpire.
Just shim it And other points easier mentioned than done
You can find methods for subduing or converting segments that are in the wrong shape for your packaging device of choice packaging tools could be extended or configured to wayward ship quests. However, the overhead of handling for several diverse flavors of modules can be a tiresome add-on to an ever more cumbersome method.
Another typical scenario is including a core dependency from a CDN a classic example is Query within a tag. We have to tell our tool that that dependency is already accounted for, and not to be concerned about it. And when we can get the config format proper (grrrr, this one attacks me every period), offer that jQuery dependency to our guests as $ instead of jQuery. Et cetera.
Yes, it’s all very possible
Only at that point some, possibly several of you’re squinting and thinking come on, it’s not that hard. And, in the excellent plan of issues, it’s perhaps not. I I assume. It’s doable.
But here’s the punch-line. Or, at least, the stage which makes me want to rest down on the floor to get a while. Every single instrument or method or the combination of tools does each one of what exactly I’ve talked about in a slightly different approach. Browserify, require.js, web pack, the others. Whether that’s the expectation of AMD module format or a separate config file or different command line options, each remedy has its studying contour that proves incredibly unfun for me when I’d somewhat be, you understand, applying features. It sabotages my focus.
And then we include more
Any single aspect, like swimming for low-conformant module syntax, can be insignificant in isolation, but on average I am a-T least one layer removed in the packaging by way of a develop workflow abstraction. I’m usually searching at my packaging config through a dark lens of gulp or grunt. And usually, there are other bits of play, such as a watch task to spawn packaging builds when related signal has changed.
It’s a valid signal the browser if a process in my own many recent drink workflows is the just one I don’t fully have a handle? It sourced from a boilerplate instance. For five minutes, I’d like the whole system excellent and complete in my brain. Now I seem at the code, and it’s, once again, soup.
Simply today I had been considering the readme on babel-loader, an ES6 module transpiler, and loader. We’ve got a task utilizing web pack, and you want to write our products for this in ES6. But today, here I am again. How do I arrange web package precisely visas babel-loader? How can I be confident that I will import non-ES6 dependencies into my recently-minted ES6 modules?