rk-customize-cra

    0.9.1 • Public • Published

    customize-cra

    All Contributors

    This project provides a set of utilities to customize create-react-app versions 2 and 3 configurations leveraging react-app-rewired core functionalities.

    How to install

    This project relies on react-app-rewired. You'll need to install that in order for customize-cra to work.

    yarn add customize-cra react-app-rewired --dev

    ❗ Warning

    "Stuff can break" - Dan Abramov

    Using this library will override the default behavior and configuration of create-react-app, therefore invalidating the guarantees that come with it. Use with discretion!

    Overview

    customize-cra takes advantage of react-app-rewired's config-overrides.js file. By importing customize-cra functions and exporting a few function calls wrapped in our override function, you can easily modify the underlying config objects (webpack, webpack-dev-server, babel, etc.) that make up create-react-app.

    Usage

    Note: all code should be added to config-overrides.js at the same level as package.json.

    See the api docs for documentation for each function.

    With webpack

    To use these plugins, import the override function, and call it with whatever plugins you need. Each of these plugin invocations will return a new function, that override will call with the newly modified config object. Falsy values will be ignored though, so if you need to conditionally apply any of these plugins, you can do so like below.

    For example:

    const {
      override,
      addDecoratorsLegacy,
      disableEsLint,
      addBundleVisualizer,
      addWebpackAlias,
      adjustWorkbox 
    = require("customize-cra");
    const path = require("path");
     
    module.exports = override(
      // enable legacy decorators babel plugin
      addDecoratorsLegacy(),
     
      // disable eslint in webpack
      disableEsLint(),
     
      // add webpack bundle visualizer if BUNDLE_VISUALIZE flag is enabled
      process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),
     
      // add an alias for "ag-grid-react" imports
      addWebpackAlias({
        ["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js")
      }),
     
      // adjust the underlying workbox
      adjustWorkbox(wb =>
        Object.assign(wb, {
          skipWaiting: true,
          exclude: (wb.exclude || []).concat("index.html")
        })
      )
    );

    With webpack-dev-server

    You can use the overrideDevServer function to override the webpack-dev-server config. It works the same way as override:

    const {
      override,
      disableEsLint,
      overrideDevServer,
      watchAll 
    = require("customize-cra");
     
    module.exports = {
      webpack: override(
        // usual webpack plugin
        disableEsLint()
      ),
      devServer: overrideDevServer(
        // dev server plugin
        watchAll()
      )
    };

    With MobX

    If you want CRA 2 to work with MobX, use the addDecoratorsLegacy and disableEsLint.

    Documentation

    See api.md for documentation on the functions provided by customize-cra.

    Contributing

    For more information about contributing to this project, like a directory map or a how-to for reporting an issue about the project, please see contributing.md.

    Contributors ✨

    Thanks goes to these wonderful people (emoji key):

    dqu
    dqu

    💬
    Breeze
    Breeze

    💻
    Terryand
    Terryand

    💻
    m-weeks
    m-weeks

    🐛
    吴超
    吴超

    💡
    James Thistlewood
    James Thistlewood

    💻
    taddj
    taddj

    💬
    MeiLin
    MeiLin

    💻
    Graham Crockford
    Graham Crockford

    🤔
    afei
    afei

    💻
    zoomdong
    zoomdong

    💻
    Danilo Campana Fuchs
    Danilo Campana Fuchs

    💻
    Rodrigo Narvaez
    Rodrigo Narvaez

    💻
    blackmatch
    blackmatch

    💻
    billypon
    billypon

    💻
    Juetta
    Juetta

    💻

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Keywords

    none

    Install

    npm i rk-customize-cra

    DownloadsWeekly Downloads

    0

    Version

    0.9.1

    License

    MIT

    Unpacked Size

    103 kB

    Total Files

    7

    Last publish

    Collaborators

    • rockie