https://github.com/thibaudcolas/react-router-browserify-build
Warning: Browserify and the React ecosystem
https://github.com/thibaudcolas/react-router-browserify-build
browserify react react-router
Last synced: about 2 months ago
JSON representation
Warning: Browserify and the React ecosystem
- Host: GitHub
- URL: https://github.com/thibaudcolas/react-router-browserify-build
- Owner: thibaudcolas
- Created: 2016-05-31T16:16:21.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-09-11T19:40:53.000Z (almost 10 years ago)
- Last Synced: 2025-08-31T06:31:53.528Z (10 months ago)
- Topics: browserify, react, react-router
- Language: JavaScript
- Homepage: https://thib.me/warning-browserify-and-the-react-ecosystem
- Size: 231 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
react-router-browserify-build
=============================
> Highlights an issue when building projects using [react-router V2](https://github.com/reactjs/react-router) with [Browserify](http://browserify.org).
## The issue
(Warning: big file) L248 of https://github.com/thibaudcolas/react-router-browserify-build/blob/master/bundle.js#L248.
When using `browserify` to bundle a project that uses `react-router`, the default configuration of browserify transforms causes around 3kb of minified/gzipped warning messages to end up in the production bundles.
The source of the problem is that by default browserify transforms do not run on packages in `node_modules`. Configuring those to run on the whole bundle is simple, but I believe [this is counter-intuitive to the common "best practices](https://github.com/babel/babelify#why-arent-files-in-node_modules-being-transformed)", and people might overlook this.
### Reproduction
```
npm run start
# Or
NODE_ENV=production browserify index.js -t [ babelify ] -t [ envify ] > bundle.js
```
https://github.com/thibaudcolas/react-router-browserify-build/blob/master/bundle.js#L26
## The fix
### On the command line
Use the `-g` or `--global-transform` flag to run `envify` or `loose-envify` on the whole bundle:
```
NODE_ENV=production browserify index.js -t [ babelify ] -g [ envify ] > bundle.js
```
### With the API
Use the `global flag`:
```js
b.transform(envify, { global: true });
// Or as configuration:
{
transform: [
[
envify,
{ global: true },
],
],
}
```