
Show HN: Jetpack – Webpack made more convenient - kn8
https://github.com/KidkArolis/jetpack
======
root_axis
Cool. I wouldn't take the critics too harshly. As someone who has configured a
lot of webpack configs across multiple version of webpack and various versions
of the plugins necessary to enable these features, I know _exactly_ what you
had in mind when you put this together. This is a very saturated technology
stack, so people can't help but react to it as noise.

To the critics, in front-end land there are some programmers who believe that
building an SPA is always a mistake. I am of the opinion that there are some
types of applications that live in the browser that benefit from the UX
enhancements that scripting can provide. We all know some examples.

Everyone knows that front-end land is a crazy wild-west with a lot of moving
and a lot of breaking along with a lot of hype, trends, wheel-reinventing and
cavalier attitudes towards security. The criticisms are mostly fair.

However, if you're building an SPA, there is a combination of tools out there
that can provide a very conceptually clean (from an architectural
perspective), performant, reusable, and highly productive and fun development
experience. Of course, this doesn't mean these tools make building an SPA the
appropriate engineering decision, they are just tools, only the requirements
can dictate whether or not an SPA should be built.

This project attempts to preconfigure via webpack, what is IMO, the best
selection of tools available for working on an SPA today. For me, these tools
include:

    
    
      - react
      - react SSR
      - bundle code-splitting
      - es6 (or ts/es6+flow)
      - es6 modules
      - hot code and css reloading 
      - module aliasing
      - css modules 
      - postcss
      - reusing business and validation logic modules on the front and back end
    

All of these tools solve very specific (former) problems that one encounters
while working on an SPA. Anyway, nice work!

------
BucketSort
Woof sometimes HN can be pretty unforgiving. Remember the human guys. Good job
man. Keep it up. Thanks for contributing to open source.

~~~
nikkwong
Agreed. Webpack's configuration is so daunting that, well, this is so
obviously needed.

~~~
chrisweekly
Not anymore! Webpack 4 is ~"zero-config"!

~~~
kn8
For a different definition of zero though. While webpack now does something
useful with no configuration (which is great), you will most likely end up
adding lots of configuration for any application. Whereas with jetpack there's
a chance that you won't (at least in my experience).

The challenge of course is the diversity of the ecosystem. Different projects
are trying to address it differently, e.g.

* CRA is opinionated and unconfigurable

* Neutrino/pwa-cli propose a higher level plugin approach (i.e. install a plugin, without needing to configure it, in webpack plugins take many lines of configuration to configure)

* Next/Gatsby use a plugin system as well but are also specialised tools which means a lot of decisions can be abstracted

* jetpack tries to be application/use case/framework agnostic and provide you with the most commonly used/useful foundation, you can optionally add extra (e.g. sass), but you don't have to recreate the foundation (i.e. es6, jsx, modern css, css modules, hot reloading, serving, producing html, etc)

It's also about the DX, jetpack lets you run a dev server with a single
command, it lets you analyse the bundle with a sigle command, it builds an
optimised, split chunk bundle with a single command.

Just pointing out some motivations behind the project, I'm a fan of webpack,
been using it for many years.

------
fimdomeio
Hey just fyi in case you don't know, jetpack[1] is the name of a very well
known wordpress plugin by Automatic. Might cause some confusion.

[1]
[https://wordpress.org/plugins/jetpack/](https://wordpress.org/plugins/jetpack/)

~~~
guessmyname
Searching for “jetpack” in a fresh _—no cookies—_ browser session returns:

• [https://jetpack.com/](https://jetpack.com/)

• [https://twitter.com/jetpack](https://twitter.com/jetpack)

•
[https://wordpress.org/plugins/jetpack/](https://wordpress.org/plugins/jetpack/)

Which are the canonical URLs for JetPack, by Automatic.

KidkArolis will have a hard time promoting his project.

\---

My suggestion for KidkArolis is to rename his project to one fo these:

• “ConvePack” considering the slogan _“Webpack made more convenient”_

• “WrapPack” considering the description _“Jetpack wraps webpack”_

• “SimplePack” assuming his project is simpler than WebPack

~~~
ksec
OR JustPack?

I remember one of the main Goal of WebPack 5 was sane defaults. ( I cant find
the post anymore ) So hopefully the WebPack team can learn a lot from JetPack.

------
joemanaco
Haven't looked deeper in it, but why does it happen all the time that people
think they can fix complexity by adding another layer of complexity too it?

~~~
notus
I'm not entirely sure but I see this pop up a lot with webpack. Webpack is not
inherently difficult to configure, it just requires you to read the
documentation. All these solutions are doing is adding what they feel are sane
defaults to the webpack experience. I don't see how this would appeal to
someone who knows webpack well. In my opinion these solutions are just
intended for a minority of new developers. For anyone else they could roll out
their own faster than they could learn how to use abstraction layers built
around someone else's.

~~~
ricardobeat
On the other side, comments like yours also pop up with the same frequency.
'Just read the documentation', which sits at 50+ pages, does not make for a
good developer experience. Projects like this are a symptom of the pain
developers, new and old, feel when faced with a mountain of complexity just to
get a module system and ES6 working on any small project.

~~~
notus
I'm sorry but you should have a basic understanding of something before using
it, that is just common sense.

------
ronilan
_Run anywhere without installing locally, just like nodemon._

I npm install everything locally, never globally, and use npm run script to
easily execute (and chain) stuff.

Am I in the minority?

~~~
kn8
Nah, I think installing locally is more common and often recommended. But I
personally like the convenience of executing ad hoc bits of js on my laptop
using `node` or `nodemon`. Why not the same for browser javascript?

E.g. you could do something like:

    
    
      cd ~/Desktop/foo
      npm i somepkg
      echo console.log(require('somepkg')()) > index.js
      jetpack
    

And now you're running some pkg in the browser, to try/test it out. That's
what the use case for this feature really is. For real apps, I install it
locally as well or else a breaking change in the future could cause issues.

~~~
e12e
No language has this down, but there's an environment manager (pip, rustup,
rbenv..) that try to do all, and avoid the need to handle more than one
"magic" session in your bashrc(etc): "asdf":

[https://github.com/asdf-vm/asdf](https://github.com/asdf-vm/asdf)

Now, a few new languages do come with pretty decent "virtual env" thingy-s ,
but most stumble for a few years.

So far (past year) I've been pretty happy with asdf. Mostly use it for ruby
and node - but also rust and golang, lisp, Java and ocaml (mostly as a
"consumer" of various cli tools, and/or toy projects.

~~~
GlennS
Another way to do this is to install Nix and direnv (and/or Emacs direnv-
mode), then include a `use nix` statement in the .envrc file inside your
project root.

Then, when you `cd` into your project directory, your environment with all its
dependencies appears.

However, there are some downsides to this magical future tech:

\+ Nix is hard to learn.

\+ Not compatible with the standard environment managers for each language.

[https://github.com/direnv/direnv](https://github.com/direnv/direnv)
[https://nixos.org/nix/](https://nixos.org/nix/)

~~~
e12e
Interesting. I've been considering nix, but wasn't aware of direnv. Should be
a sensible combination.

------
cfv
How does this fare against _parcel-bundler_
([https://parceljs.org/](https://parceljs.org/))? It does pretty much the same
thing in a slightly different manner, and I'd like to know before I actually
consider giving it a try.

Thanks!

[1]:

------
wellpast
And then weirdly you have also _this_ alternative to webpack from the Elm
community:

[https://github.com/NoRedInk/jetpack](https://github.com/NoRedInk/jetpack)

Also called Jetpack...

------
porphyrogene
There are a lot of "configuration-free" Webpack solutions popping up. The one
thing that they all have in common is optional configuration.

~~~
kabes
If you want something truly configuration-free you could try Meteor. It's
mostly an advanced zero-configuration (not even optional) build tool these
days that supports automatic code splitting via dynamic imports, full npm
integration, multiple bundles (old/new browsers), ... Typescript support could
be better, but I believe they're working on that.

Of course being zero-config you loose some flexibility.

------
Chloro
We already have parcel.js which does all of this really well.

------
jczhang
What was the motivation for this given existence of CRA? What are the main
differences?

~~~
kn8
I'd say:

\- meant to be not React only

\- less opinionated in that it doesn't include jest

\- smaller in scope/code, so easier to understand what it does by reading the
code (?)

\- allows extending configuration

\- focus on SPA use case with jetpack/serve or proxy features

I should probably give CRA a proper spin though, it's popular and V2 seems
pretty good.

------
general8bitso
Isn’t that the name of a Wordpress plugin?

[https://wordpress.org/plugins/jetpack/](https://wordpress.org/plugins/jetpack/)

------
fiatjaf
Do you know what else works almost without configuration, it's fast and
produces small minifiable bundles? Browserify.

~~~
kn8
Yeah, I mention it in the Comparison[1] section of the docs ;)

[1]
[https://github.com/KidkArolis/jetpack/blob/master/docs/08-co...](https://github.com/KidkArolis/jetpack/blob/master/docs/08-comparison.md)

