Jetpack

ūüöĬ†Jetpack ‚Äď webpack made more convenient.

Jetpack wraps webpack to create a smoother developer experience. Jetpack can be used instead of webpack, webpack-cli, webpack-dev-server and webpack-dev-middleware without writing any configuration. Jetpack is a thin wrapper around webpack, and can be extended with any of the webpack configuration.

  • Sensible defaults¬†to handle modern JavaScript, CSS and images.
  • Preconfigured Babel¬†with¬†@babel/preset-env¬†and¬†@babel/preset-react, configurable via¬†.babelrc.
  • Preconfigured PostCSS¬†with¬†postcss-preset-env¬†including autoprefixing, configurable via¬†postcss.config.js.
  • CSS modules available¬†by switching one config flag.
  • Automatic JSX detection¬†switches between¬†React.createElement¬†or¬†h¬†depending on dependencies.
  • Hot reloading built in¬†for React as well as vanilla JavaScript and CSS.
  • Automatic chunk splitting¬†with inlined runtime and HTML generation.
  • Smooth workflow¬†for simultaneously developing client and server applications.
  • Single dependency¬†with hassle-free updates.
  • Run anywhere¬†without installing locally, just like¬†nodemon.

Why use jetpack?¬†To avoid rolling your own custom webpack config or having to paste it from old projects. Jetpack has a set of defaults that should get you off the ground quickly. And with the¬†proxy¬†config or universal¬†jetpack/serve¬†middleware you don’t have to worry about wiring up webpack dev middleware or dev server ‚Äď everything¬†just works.

Usage

Install globally or locally:

$ npm install -g jetpack

In your project with package.json or index.js, start your app on http://localhost:3030:

$ jetpack

To build the app for production to a dist directory:

$ jetpack build

Inspect the bundle size and make up:

$ jetpack inspect

Use jetpack anywhere, anytime

One of jetpack goals is to help you run any piece of JavaScript in a browser as easily as it is to run node scripts. Install jetpack globally and point it to any file on your machine. This is an alternative to jsfiddle / codepen / codesandbox style of hacking on things.

$ jetpack ~/Desktop/magic.js

Or any project on your machine:

$ jetpack --dir ~/projects/manyverse

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.