Using react-intl with browserify about formatjs HOT 13 CLOSED

@santiagoaguiar Are there docs on browserify and webpack on how to handle different entry points other than what's in "main" in the package.json file?

If so, then yes, we can address this by creating a browser.js or whatever for creating a CommonJS entry point suitable for the browser.

from formatjs.

Yes, both browserify and webpack support it, based on this spec.

In webpack you need to configure the field explicitly, by using the resolve.PackageAlias field.

On browserify, it uses the "browser" field if present, as seen here.

from formatjs.

@santiagoaguiar okay, adding a "browser" field to the package.json sounds good. /cc @caridy

If you want to take a stab at this, that would be great! Feel free to open a PR, and we can discuss the details in the PR, and once we get things figured out for one package, we can expand this pattern to all of the other FormatJS packages.

from formatjs.

👍 Count my vote for this

from formatjs.

Closing this now that #40 has been merged.

from formatjs.

Released in v1.0.2.

from formatjs.

Thanks, tested and works, cut out the ~220kb from my webpack bundle.

from formatjs.

Also trying to get this to work with browserify. Is there an example on how to switch and set languages with browserify ?

from formatjs.

These links will probably be helpful:
https://github.com/gpbl/react-locale-hot-switch
remix-run/react-router#484 (comment)

from formatjs.

Thanks @kyleboyle I saw the react-locale-hot-switch. I still don't get how to load and or change a local. It there a sample app using browserify and react-intl somewhere?

from formatjs.

In that project, take a look in i18n/index.js. You just need to use browserify in the same way that webpack is being used to split bundles and async load. Specifically in webpack, require.ensure introduces a bundle split point and does async loading of the split bundle. I'm sure browserify would have a similar mechanism. You can see how the individual language files in that directory are loaded as separate bundles.

from formatjs.

The idea behind react-locale-hot-switch is to create a chunk for each language, containing the required files: your localized messages and the various locale-data needed by react-intl (and eventually other localised stuff, as moment.js locales).

When a user changes the language, the relative chunk is injected into the browser (with webpack) and the new localized messages are passed as props to the component tree, forcing the components to re-render. (I have no idea how browserify manages this code injection nor how to create chunks with it)

Anyway I understand it's not a simple task: a faster way is just to reload the page and let the server include the proper <script>s with the localized data.

from formatjs.

Thanks for the help guys! I took the easy way and just reloaded the page for now :)

from formatjs.