Skip to content

Commit

Permalink
Ignore Moment.js locales by default (#2187)
Browse files Browse the repository at this point in the history
* Ignore Moment.js locales by default

* Update README.md
  • Loading branch information
gaearon authored May 16, 2017
1 parent 493e5a6 commit 65ff548
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 0 deletions.
6 changes: 6 additions & 0 deletions packages/react-scripts/config/webpack.config.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,12 @@ module.exports = {
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebookincubator/create-react-app/issues/186
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
Expand Down
6 changes: 6 additions & 0 deletions packages/react-scripts/config/webpack.config.prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,12 @@ module.exports = {
new ManifestPlugin({
fileName: 'asset-manifest.json',
}),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
Expand Down
27 changes: 27 additions & 0 deletions packages/react-scripts/template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [`npm test` hangs on macOS Sierra](#npm-test-hangs-on-macos-sierra)
- [`npm run build` silently fails](#npm-run-build-silently-fails)
- [`npm run build` fails on Heroku](#npm-run-build-fails-on-heroku)
- [Moment.js locales are missing](#momentjs-locales-are-missing)
- [Something Missing?](#something-missing)

## Updating to New Releases
Expand Down Expand Up @@ -1616,6 +1617,32 @@ It is reported that `npm run build` can fail on machines with no swap space, whi
This may be a problem with case sensitive filenames.
Please refer to [this section](#resolving-heroku-deployment-errors).
### Moment.js locales are missing
If you use a [Moment.js](https://momentjs.com/), you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of [all the locales provided by Moment.js](https://momentjs.com/#multiple-locale-support).
To add a specific Moment.js locale to your bundle, you need to import it explicitly.<br>
For example:
```js
import moment from 'moment';
import 'moment/locale/fr';
```

If import multiple locales this way, you can later switch between them by calling `moment.locale()` with the locale name:

```js
import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/es';

// ...

moment.locale('fr');
```

This will only work for locales that have been explicitly imported before.

## Something Missing?

If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/packages/react-scripts/template/README.md)

0 comments on commit 65ff548

Please sign in to comment.