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

monkey-react-scripts

v5.0.0-0

Published

Monkey react script runner

Downloads

1,196

Readme

monkey-react-scripts

Monkey react script runner: Customize react-scripts webpack config without eject or fork

Many of you want to add a small change to your webpack config created by create-react-app. but you don't want to eject. or use other scripts like configurable-react-scripts or custom-react-scripts because of update delay.

With monkey-react-scripts you can use react-scripts configs, but monkey patched one. so you always have updated react-scripts.

☢ DANGER ☢

As @gaearon mentioned multiple times there, it's not good idea to extend it. From my point of view, I'm giving you gun, so try not to shot yourself, because probably nobody will help you. When you modify something, be completely sure what you doing!

source

Usage

  • use create-react-app and create your project, more detail
npm install -g create-react-app

create-react-app my-app
cd my-app/
  • install monkey-react-scripts
npm install monkey-react-scripts --save-dev --save-exact
  • create webpack.monkey.js in the root of your project. you can modify webpack config here.
module.exports = function(webpackConfig, isDevelopment) {
  // mutate webpackConfig
};
  • edit package.json and replace scripts
  "scripts": {
    "start": "monkey-react-scripts start",
    "build": "monkey-react-scripts build",
    "test": "monkey-react-scripts test"
  }

How it works

I suggest you see scripts and bin folders. (less than 100 line of code)

Note: returned value of require function is mutable. so you can mutate that before real build/start script.

Snippets

You can use snippets if you want.

snippets:

  • addPlugin
  • findRule
  • findBabelRule

Example

Before use examples, you should know what happens inside react-scripts webpack config. first, see and read this files:

  • node_modules/react-scripts/config/webpack.config.dev.js
  • node_modules/react-scripts/config/webpack.config.prod.js

also, you can log webpackConfig value.

// webpack.monkey.js
module.exports = function(webpackConfig, isDevelopment) {
  console.log(webpackConfig);
};

Also, you can find complete examples at monkey-react-scripts-example repo

Enable .babelrc

The .babelrc file is enabled for tests if you have webpack.monkey.js file. also, you can enable .babelrc for build and start:

  • edit webpack.monkey.js like this (copy findRule, findBabelRule from snippets):
function findRule(webpackConfig, callback) {
  /* snippet codes */
}

function findBabelRule(webpackConfig, callback) {
  /* snippet codes */
}

module.exports = function(webpackConfig, isDevelopment) {
  const babelRule = findBabelRule(webpackConfig);
  babelRule.options.babelrc = true;
};

Webpack Visualizer

I love visualization so, I add webpack-visualizer-plugin to my project

  • install plugin:
npm install webpack-visualizer-plugin --save-dev
  • add the plugin to config (only at build time)
// webpack.monkey.js
var Visualizer = require("webpack-visualizer-plugin");

module.exports = function(webpackConfig, isDevelopment) {
  if (!isDevelopment) {
    webpackConfig.plugins.push(new Visualizer());
  }
};
  • build
$ npm run build
// some output
$ tree build
build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── static
│   ├── css
│   ├── js
│   └── media
└── stats.html                      <-- new file

Decorator support

If you love decorators, you can add decorator support:

  • install decorator plugin
npm install --save-dev @babel/plugin-proposal-decorators
  • edit .babelrc like this:
{
  "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
}

related issues: #107, #167, #214, #309, #411, #1357

Relay support

  • install babel-plugin-relay
yarn add --dev babel-plugin-relay
  • edit .babelrc like this:
{
  "plugins": ["relay"]
}

and continue relay documentation steps.

if you are using relay classic you can see old readme and get some ideas.

related issues: #462, #662, #900

postcss config

If you want to change postcss config you can use this code.

// add rtl css support
// find postCssLoader
const postCssFunction = postCssLoader.options.plugins;
postCssLoader.options.plugins = () => {
  return [...postCssFunction(), require("postcss-inline-rtl")];
};

you can find more detail in this file

TODOs

  • [ ] customize test runner (jest)
  • [x] add more example
    • [x] relay support

compatibility

| react-scripts | monkey-react-scripts | | :-----------: | :------------------: | | 0.9.x | 0.0.5 | | 1.x.x | 0.1.0 | | 2.0.0 - 2.1.1 | 0.1.2 | | 2.1.2 | 0.1.4 | | 3.0.0 | 0.2.0 | | 4.0.0 | 0.3.0 | | 5.0.0 | 5.0.0-0 |

Thanks

@svrcekmichal for configurable-react-scripts