react-scripts

Customized react-scripts package.

Getting Started

Clone the repository to make changes:

git clone https://github.com/niveditn/react-scripts.git

Prerequisites

This library is meant for use in an un-ejected CRA app. (See facebook/create-react-app.) It sligthly modifies the behavior of the original scripts used to run, build and test the CRA app.

Installation

To install this customized version of react-scripts, simply point the corresponding package.json key towards this github repo.

i.e. Replace this:

"react-scripts": "^2.1.1"

with:

"react-scripts": "@niveditn/react-scripts"

Then, in your project directory, run npm install command:

npm i

Your project should now be using the custom version of react-scripts.

Usage

The usage is identical to original package. The available npm scripts are:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
},

Customization

Current version: 2.1.1

The following customization has been done to the original react-scripts package.

package.json

Add the following packages to the manifest file:

    "base64-inline-loader": "^1.1.0",

config/webpack.config.dev and config/webpack.config.prod

base64-inline-loader

Add this loader at the top of the config objects, right under oneOf key. Make sure it is present before url-loader settings.

oneOf: [
  // "base64-inline-loader" converts matching images to base64 strings.
  // If you add this loader at the top, you can leave the "url-loader"
  // as it is, since webpack will use the first loader it matches.
  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    loader: require.resolve('base64-inline-loader'),
    options: {
      name: 'static/media/[name].[hash:8].[ext]',
    }
  },
  // [... "url-loader" settings and so on ...]
]

Keeping this loader at the top means that if an image file matches its test, it will be converted to base64 string as intented. The remaining loaders will not be checked, so url-loader will not be used for the matching file.

Tree Shaking feature enabled

Add the following object to config/webpack.config.prod.js:

exclude: /node_modules/,
presets: [[require.resolve('babel-preset-react-app'), { modules: false }]],
sideEffects: false,

A "side effect" is defined as code that performs a special behavior when imported, other than exposing one or more exports.

scripts/start.js

Disable typescript checking

Typescript checking can be disabled until the project is updated to React 16.

Remove or comment out these lines of code:

30    const verifyTypeScriptSetup = require('./utils/verifyTypeScriptSetup');
31    verifyTypeScriptSetup();

script/utils/createJestConfig.js

Modify the config object in this file as follows:

Ignore transform

Replace the transformIgnorePatterns key:

transformIgnorePatterns: [
  "<rootDir>/node_modules/(?!@)",
  "<rootDir>/src/node_modules/(?!@)"
],

moduleNameMapper

Add the third key to moduleNameMapper:

moduleNameMapper: {
  '^react-native$': 'react-native-web',
  '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
  "\\.(css|less|scss|sass)$": "identity-obj-proxy"
},

Ignore files

Add the following object to config:

testPathIgnorePatterns: [
  "<rootDir>[/\\\\](build|docs|node_modules|scripts)[/\\\\]",
  "<rootDir>/src/lib/models",
  "<rootDir>/src/lib/vspk",
  "<rootDir>/src/lib/vis-graphs",
  "<rootDir>/src/lib/test-utils",
  "<rootDir>/src/lib/service",
],

Built with

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

• Getting Started – How to create a new app.
• User Guide – How to develop apps bootstrapped with Create React App.
• react-scripts – Original source code used at v2.1.1.

Versioning

This library follows the same versioning as facebook's react-scripts package.

At the time of writing this, react-scripts version was 2.1.1, which is the original source used.

License

This project is licensed under the MIT License - see the LICENSE.md file for details