CODEWITHSUNDEEP
create-react-appuglifyjs
jasan
jasan

Reputation: 12937

Removing log statements in Create React App without ejecting

I use lots of console.log() statements while developing Apps (and I mean LOTS). How exactly can I remove them without "ejecting" from a Create React App What I considered but not sure how exactly to implement:

In my package.json:

 "build": "react-scripts build && uglifyjs --compress drop_console build/static/js/main.xxxxx.js  -o build/static/js/main.xxxxx.js

However How exactly can I know the hash suffix on the main.js file so I can call this command and save the output js file with same filename

Upvotes: 9

Views: 10866

Answers (5)

vinhhungle
vinhhungle

Reputation: 159

I use this setup. I still need console log while in dev.

// config-overrides.js
const { override, addBabelPlugins } = require('customize-cra')

module.exports = override(
  process.env.NODE_ENV !== 'development' && addBabelPlugins(
    "transform-remove-console"
  )
)

Upvotes: 0

Kaiwen Luo
Kaiwen Luo

Reputation: 513

You can try this combo of packages to override the config:

Note: from the document of react-app-rewired, this would break the the "guarantees" that CRA provides. So you should be careful before using it.

npm i -D customize-cra react-app-rewired babel-plugin-transform-remove-console

Modify your package.json, replace react-scripts to react-app-rewired except the reject. Once complete, your scripts should look like this:

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

Then create a file under the root directory:

touch config-overrides.js

// config-overrides.js
const { override, addBabelPlugins } = require('customize-cra')

module.exports = override(
  addBabelPlugins(
    "transform-remove-console"
  )
)

Finally, after running npm run build, all console.log gone.

Upvotes: 0

Simon Hutchison
Simon Hutchison

Reputation: 3035

Add this to index.js

if (process.env.NODE_ENV !== 'development') {
  console.log = () => {}
}

Note that this will only suppress the messages, it will not strip them from your deployed code.

Note Nov 2020

Don't do this for library modules, it will disable console.log for the parent project.

Update Sept 2020

There is some movement on this issue on the CRA repo... go give it support/thumbs up here https://github.com/facebook/create-react-app/pull/9222

References: How to quickly and conveniently disable all console.log statements in my code?

Upvotes: 13

user12834955
user12834955

Reputation:

Do this in package.json scripts:

 "build": "./scripts/build.sh"

and then in your project:

scripts/build.sh looks like:

#!/usr/bin/env bash

set -e;
cd "$(dirname $(dirname "$BASH_SOURCE"))"  # cd to project root

react-scripts build 

for f in build/static/js/*.js; do

  uglifyjs --compress drop_console "$PWD/$f" -o "$PWD/$f"

done

Upvotes: 4

azium
azium

Reputation: 20614

If you just want to suppress log output you could wrap console.log and use that instead

const log = (...msgs) => {
  if (process.env.NODE_ENV === 'development') console.log(...msgs)
}

You can import / export this, but that sounds like a pain. Seems like a good thing to add to global

global.log = log

global.log('will only log in dev')

Upvotes: 5

Related Questions