1.0.1 • Published 7 years ago

react-super-scripts v1.0.1

Weekly downloads
3
License
BSD-3-Clause
Repository
github
Last release
7 years ago

⚡ 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: