How can I use this module in IE9? about rc-datepicker

[FrancescoCioria]

The npm package is compiled in JavaScript 5, you can simply import it in your project and create a bundle using browserify or webpack. About the UI I haven't tested IE yet, so I can't guarantee it will work correctly. I'll verify it in the following days

[luokuning]

So much clear ! Thanks a lot ~

[luokuning]

I install the datepicker via npm, and create a bundle.js using Browserify, but I found a new problem: bundle.js is closeto 1000KB, it is too heavyweight in browser. Is there any way to make it lighter?

[FrancescoCioria]

bundle.js is a big JavaScript file with everything you need inside so to reduce its size you can proceed as always: first minify it and then gzip it. (by using a plugin of gulp/grunt/webpack or here: minify gzip)

[gabro]

Does bundle.js include all the locale files?

[FrancescoCioria]

@luokuning I think I misunderstood your question before. The bundle.js you're referring to probably contains other libraries (like ReactJS) that's why Its size is around 1mb. Our datepicker, if minified, should be around ~40/50kb which would decrease even more if gzipped. The biggest part of its size comes from Moment.js which minified is about ~34kb.

[luokuning]

@FrancescoCioria I realized that I have missing something on Browserify.First time I packed the DatePicker.js by the following code:

browserify DatePicker.js > DatePicker_browser.js

and then the size of DatePicker_browser.js is nearly 1000KB. Then I checked the Browserify home page and found that if there is no need to include some file I should use the ' --ignore' param, so my code become follows:

browserify DatePicker.js --ignore react/addons --ignore/react --ignore moment > DatePicker_browser.js

And the file become lighter as expected, but it still approaching 130KB. Am I still missing something in Browserify or anything else?

[luokuning]

@gabro Yes, I think so, as Browserify will pack all files needed into one file.

[gabro]

What browserify does is to recursively include in the bundle every require it finds and that's what you want in the end: in your final project you're probably shipping a whole react application so it makes sense to include the reactjs library in your app bundle (unless you're bundling it separately, but that's another story)

So the idea is that somewhere in your react application you do

require("rc-datepicker")

and that causes the datepicker to be included by browserify into the final bundle.

So I guess the real question is: what do you need DatePicker_browser.js for? If you need it to work independently in a non-reactjs application, you'll need to include reactjs in it.
If you're using it in a reactjs application, then just use browserify and reactjs will get included only once in your app's bundle.

[luokuning]

@gabro Yes, I have loaded react.js before, so I want to pack DatePicker.js > DatePicker_browser.js without reactjs, and use it later as a UI component. I understand what you mean is I should require("rc-datepicker") in where the component suppose to be implemented, such as in HomePage.js, and then use Browserify to pack HomePage.js?

[gabro]

Precisely.
rc-datepicker simply uses require to bring reactjs in, so if you have

HomePage.js -> DatePicker.js -> react
            \-> react

where the arrow means "requires", you can just run browserify on HomePage.js and it will produce a bundle containing HomePage.js, DatePicker.js and react (only once)

This is exactly why we distribute the source, rather than a standalone minified build. This way you can build and optimize your app as you prefer, using any build system (wepack, browserify, you name it!)

[luokuning]

So it is, I got you! Thanks you guys for creating a awesome datetimepicker component, and helping to solve my puzzles! 😄