npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@infinizhen/react-webpack-babel-boilerplate

v2.182.58-8.723.12

Published

A really simple and minimalistic React 18, Webpack 5 and Babel 7 boilerplate project.

Downloads

14

Readme

REACT18-WEBPACK5-BABEL7 BOILERPLATE

This is a really simple and minimalistic React 18, Webpack 5 and Babel 7 boilerplate project.

By simple and minimalistic i mean simple and minimalistic. It is just that. A simple project, with the most common dependencies (both prod and dev) for a minimal React project setup.

It doesn't include any test suites or CSS frameworks. It doesn't even include a router.

Project goal

The goal is to save me (and maybe you) like 10 or 15 minutes setting up the things i will need to use on every new react project. Sometimes i don't need CSS, sometimes i don't test dumb things, sometimes a project doesn't even feature a single link.

So that's why is this simple. This is my bare minimum to start working on even the most trivial of projects.

Usage

Install with npm and execute with npx!

Install globally with npm:

npm i @infinizhen/react-webpack-babel-boilerplate -g

Then you can run the package a là CRA:

npx infinizhen your-app

or

npx react-webpack-babel-boilerplate my-app

Clone the repo!

git clone https://github.com/Infinizhen/react-webpack-babel-boilerplate.git

Project Structure

The project structure is just suited to my most common needs. It is not important and obviously you don't need to follow that structure at all.

  • All the code is stored in /src.

    The entry point of the project is /src/index.js. This file renders a one-liner placeholder Component in that very file wich its only intention is to act as, well... a placeholder. It just renders a strings confiriming everything went okay when you run the app for the first time.

    I usually write a layout component/s wich then will show other components, these are stored in /src/layout/.

    Then i also usually diferentiate between "components" and "controls" even if they both are technically components, so i separate them in /src/components/ and /src/controls/ respectively.

  • Webpack is configured to build a bundle.js in the /public folder, using /src/index.html as the template.

package.json scripts

The most easy ones for webpack 5:

serve runs npm run webpack serve --mode development

build runs npm run webpack --mode production

Configurations

Webpack

It has the babel loader, and the style / css loader. Even if this project comes with no css frameworks or files, this configuration is included for obvious reasons.

It also features html-webpack-plugin and mini-css-extract-plugin.

Babel

This project uses a .babelrc file with @babel/preset-env and @babel/preset-react.

Other features

.browserslistrc

Babel will transpile to alive browsers with 0.25% market share or more.