react-super-scripts

1.0.1 • Public • Published

⚡ react -super-scripts

This package adds super powers and allows custom configs without ejecting Create React App

⚠️ This is not a fork of create-react-app, it is just a fork of react-scripts.

Create bootstraped React apps simply by

create-react-app my-app --scripts-version react-super-scripts

* If you don't have Create React App, then npm -g install create-react-app

Features

Apart from features provided by CRA, this package adds more goodies listed below.

Webpack

  • Webpack Dasboard
    • you got to love webpack dashboard
    • Webpack dashboard is turned on by default,but it is configurable
    • you can disable it able it setting dashboard as false in react_super_script in package.json
      {
        ...
     
        "react_super_scripts": {
          "dashboard": true
        }
      }
  • Hot module replacement
    • supports HMR for js files too.
  • Supports SASS and LESS
    • write styles in css, sass or less
  • Webpack image loader
    • for compressing images
  • Vendor splitting
    • you can split out vendor files from app logic, simply by creating a vendor.js file in src folder, and import all your vendor dependencies in that file.
  • Build Progress Bar
    • During build process a progress bar is shown.

Babel

  • Custom babel config
    • Want to use latest and greatest of javascript, no worries include custom babel presets by installing packages and adding them to .babelrc in root directory of the app
    • Note: This will completly override existing presets. You will need to create the .babelrc file inside your app folder and remember to add react-hmre preset to babel development. This script relies on react-hmre for hot module replacement.

ESLint

  • Custom eslint config
    • Not happy with the default linting rules, simply include custom eslint by installing packages and adding them to .eslintrc in root directory of the app
    • Note: This will completly override existing linting rules. You will need to create the .eslintrc file inside your app folder.

Preact

  • Using preact instead of react

    • Preact is a fast, 3kB alternative to React, with the same ES2015 API,
    • In your package.json add usePreact to react-super-scripts and set it to true. Your package.json should look like
      {
        ...
     
        "react_super_scripts": {
          "usePreact": true
        }
      }

    Then uninstall react and react-dom and install preact and preact-compat

    npm uninstall react react-dom && npm install --save preact preact-compat

    • You can keep using you existing react code without any changes, under the hood webpack will alias react and react-dom to use preact.
    • Note: This package uses preact-compat for maintaining compatibility with react. This doesn't guarantee complete compatibility, test all features fully first.

Others

  • Custom entry point
    • You can specify app entry point for webpack.
    • In your package.json specify the file path to appEntry property of react_super_scripts field. Your package.json should look like
      {
        ...
     
        "react_super_scripts": {
          "appEntry": "src/index.js"
        }
      }
    a default entry point (src/index.js) is already provided in package.json.
    • Note: if you don't provide appEntry in your package.json it will default to scr/index.js

This package includes scripts and configuration used by Create React App.
Please refer to its documentation:

Readme

Keywords

none

Package Sidebar

Install

npm i react-super-scripts

Weekly Downloads

14

Version

1.0.1

License

BSD-3-Clause

Last publish

Collaborators

  • shriyans