score:9
they use browserify with envify.
envify will replace your environment variable checks with ordinary strings - only the variables you use will be included, so you don't have to worry about, say, aws_secret_key leaking through either. [...] by running this through a good minifier (e.g. uglifyjs2), the above code would be stripped out completely.
score:1
this is done to enable development-only checks and logging.
if you look through the react source, you'll see if (__dev__)
checks, which get replaced with if ("production" !== process.env.node_env)
by react's build process.
envify is then used to replace references to process.env.node_env
in the source with its current value at the time the build process is run.
for the uncompressed development build of react (and when using the npm version, by default) process.env.node_env
is set to "development"
, so you get the benefit of these extra checks, such as validating props passed to component against its proptypes
, warning if controlled components are potentially read-only due to misconfiguration, warnings about lists of items without a key
prop and all the other development-mode logging react provides for common problems such as misspelt lifecycle method and html attribute prop names.
for the compressed production build, process.env.node_env
is set to "production"
, so when the build is compressed with uglifyjs, these blocks of code are detected by ugilify's dead code elimination process as code which will never get run and are completely removed from the source.
a nice side-effect of this is that you can take advantage of if ("production" !== process.env.node_env)
checks to add development-only checks and logging to your own react components and libraries, since people bundling react from npm currently (with v0.12.2 the current version at the time of writing) have to deal with this as part of their build process.
Source: stackoverflow.com
Related Query
- What is the point of obvious ifs in reactjs source?
- what is the point of having static propTypes in reactjs and does it solve any problem or is it just a pattern
- What is the meaning of {...this.props} in Reactjs
- What does the hook numbers in the Reactjs Dev tool correspond to?
- What is the difference between Reactjs and Rxjs?
- What is the benefit of using styled components over css modules in Reactjs
- What is the difference between reactjs vs nextjs
- What is the point of prefixing function names with '_' React/React-native ?
- What does the "single source of truth" mean?
- ReactJS : What is the best way to give keys in array element
- Class based component vs Functional components what is the difference ( Reactjs )
- What is the purpose of having two running ports when we working with ReactJS and NodeJS?
- What are the main differences between AngularJS and ReactJS
- What is the point of watchers in redux-saga?
- What are the options to configure a reactjs and django application?
- What is the best practice to set initial state in reactjs constructor redux?
- What is the correct PropTypes for dictionary in reactjs
- What is the idiomatic way to use props in component composing in reactjs
- After mounted, ReactJS components can receive new properties or new state. What happens differently inside the component?
- What are the difference between reactJS props and refs?
- What is the point of useEffect() if you don't specify a dependancy
- Reactjs - what is the workflow to force a refresh?
- What is the importance of Default exports in ReactJS
- What is the correct way of setting state variables in Reactjs and what is the difference between these approaches?
- ReactJs What is the difference between calling {this.functionName} and {this.functionName()}
- What is the proper way to use multiple layouts in ReactJS
- what is the point of using react environment variables?
- What is the proper way of manipulating scroll of overflowed flexbox in ReactJS
- In ReactJS what does the following notation mean?
- What is the smallest building block of ReactJS - Elements or Components?
More Query from same tag
- Iterating trough array and sending http request dynamically
- How to update react component on parent changes?
- Webpack config for Code splitting not working for production build
- react update mutiple components when option is selected
- Back button not working in react native navigation
- Removing an item from a todo list in react
- cannot read property 'yyyxx' of undefined in react
- custom css style not work in React Bootstrap
- React router - Update URL hash without re-rendering page
- Full width material-ui Button within a Badge?
- extracting access token out of string in javascript
- Ubuntu create-react-app fails with permission denied
- Variable keeps showing undefined in the return statement
- React useReducer not updating state
- Undefined when accessing this.props in react component with redux
- Property in Component State not updating quick enough
- React typescript counter doesn't update
- react-fabricjs package doesn't work
- Bootstrap Reactstrap Collapse is not working with list of components
- Add text in border of a chip Material UI
- React CSSTransitionGroup does not work even with key being set
- Mobx Class Cannot read property 'loading' of undefined
- Is possible to call async function without await keyword? and what happens if we call without await?
- React: Show more/ Show less functionality, display button only when the text content is bigger than certain limit
- cannot change state in firebase auth signInWithEmailAndPassword
- MUI 5 sx not working correctly with typescript?
- Getting index from child to parent in react
- Is there a way to check for any state changes made by a user in React?
- React hooks, set return value of a function to state causes infinite loop
- show login page while logged out(clicking back button)