-
-
Notifications
You must be signed in to change notification settings - Fork 8.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Webpack moment.js integration #3128
Comments
@ichernev thank you so much for reaching out. ❤️❤️❤️❤️ We would be more than happy to help!!! A cool idea 💡 that might be worth investigating is helping you guys create a 'example' or 'test' fixture of a small use case of webpack and moment together with one or many locales. Pros:
Thoughts? |
@TheLarkInn hello, thank you for the prompt response. I like the fixture idea, we can take example from require.js documentation on our website, which mentions all the different (widely used) use-cases: http://momentjs.com/docs/#/use-it/require-js/ Basically we'll need examples for:
|
@ichernev |
@ichernev one problem is that your package.json points the In your Now, because it is a dynamic require that webpack can parse, it actually creates a require context that can be modified by the This is how I dealt with it in my own codebase: // restrict the extra locales that moment.js can load; en is always builtin
new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
// check if the context was created inside the moment package
if (!/\/moment\//.test(context.context)) { return }
// context needs to be modified in place
Object.assign(context, {
// include only japanese, korean and chinese variants
// all tests are prefixed with './' so this must be part of the regExp
// the default regExp includes everything; /^$/ could be used to include nothing
regExp: /^\.\/(ja|ko|zh)/,
// point to the locale data folder relative to moment/src/lib/locale
request: '../../locale'
})
}) This technically could be done with For dynamic loading of locales, moment would have to load locales with |
@Kovensky thank you for this explanation. The dynamic require use case is purely a user thing. I mean -- moment itself doesn't have interface to say "dynamically require a locale". It only has this hack to auto require locale on npm environment with require, and I believe it is the one causing trouble with webpack. About you example with About the entry point being the ES6 code vs the bundled (es5) code -- I didn't understand if your solution works with both or just the ES6 code entry point. Also can you tell webpack which entry point to use? I mean do we need to change anything on moment end to make this work? |
Here's a dumb question. Is there any way Moment could export a separate entry point that doesn't include references to locales, so we could write This isn't going to be a great long-term solution, but it seems like it might make folks "happy enough" in the short-term, and should work seamlessly in just about any environment that understands CJS. |
@ichernev just following up to ensure all your questions are answered. When you have a PR up we would be more than happy to look it over. Or if you are at a stopping point @Kovensky could assist you further. |
@ichernev also:
This would an item inside of the plugins property in the webpack config: which is an array of plugin instances webpack.config.js
|
@Kovensky @TheLarkInn so if I understand correctly, if the user specifies this blob in his config, the listed locales will be loaded in the "pack" and then using require a-la npm it will load them, but in case it requires something that is not "packed" it will fail? If the user doesn't specify anything then all locales will be loadable with I'm asking because we're discussing how to implement child locale loading: moment/moment#3336 Also is there away to go with @schmod suggestion. Basically define a separate npm/bower/git repo for webpack, that will have moment without locales and one with all locales and all locales separately and users can pack in a simpler way. I still don't understand how the packing will work in this case. Maybe the patch we reverted: https://github.com/moment/moment/pull/3344/files or the user has to somewhere specify all files he wants (so he either lists moment + a few locales, or moment-with-locales which contains all?). |
FYI: This problem isn't specific to moment.js. It would be nice to have a general recommendation how libs, which support multiple locales, should be used together with webpack. Other libs which I think of are https://github.com/andyearnshaw/Intl.js or https://github.com/angular/bower-angular-i18n. They don't have a |
Using create-react-app, we don't have access to webpack config. And according to the main contributor there, "It's really not right that a library requires changes in the config" Wouldn't moment/moment#2373 be more appropriate? Or maybe that's the same thing you're aiming to do? I just don't feel like playing with webpack config is the way to go to reduce moment's size in our builds... |
@donaldpipowitch date-fns solves it by passing locale as an argument https://date-fns.org/docs/I18n#usage. API looks bulky, but it's easy to write own wrappers and include all necessary locales. It's even possible to load locales on demand when the user changes the language. // app/_lib/format.js
var format = require('date-fns/format')
var locales = {
en: require('date-fns/locale/en'),
eo: require('date-fns/locale/eo'),
ru: require('date-fns/locale/ru')
}
module.exports = function (date, formatStr) {
return format(date, formatStr, {
locale: locales[window.__localeId__] // or global.__localeId__
})
}
// Later:
var format = require('app/_lib/format')
window.__localeId__ = 'en'
format(friday13, 'dddd D')
//=> 'Friday 13'
window.__localeId__ = 'eo'
format(friday13, 'dddd D')
//=> 'vendredo 13' Not sure if it's applicable to Moment.js' current state as it has a monolithic core, but still should be possible to implement in the future. |
Hi @ichernev & @TheLarkInn @yiminghe. I was trying to build an app with react boilerplate using May I recommend the aforementioned boilerplate to be the starting point for this? |
@tangoabcdelta
|
Getting this problem with webpack during the dll process i have, although after that using above methods i can get webpack to watch. whats the official integration method for moment with the require locale support? |
@andrewvmail @18601673727 - suggest you to read + understand + remove the lines of code that trigger this error from PS: It won't work with build environments. Therefore, you may have to freeze the OTHER: ant-design/ant-design#3947 |
Thanks, yeah I was able to continue development by mucking around in the antd package in around datepicker module date-picker/locale/zh_CN.js:23 The guys at antd got me to create a new ticket at Nothing major just throwing it out there. Cheers |
It seems this issue got sidetracked regarding the proper use of moment with webpack to reduce bundle sizes, specifically within the constraints of create-react-app. Is there a final word on this? I kind of favor the typescript style when it comes to importing locales. |
Until this is fixed, my solution is to simply avoid including moment in the webpack bundle. Load it as a regular browser script:
Now you have |
Guys this has been going on for a while and seems really easy to fix. Currently everyone who uses moment (awesome library btw) is including ALL the languages, which is insane, can we do something about it? For now lets say current behavior doesn't change and those who want to reduce their footprint can do something like this?
|
Agreed. But have to admit that people who import this are unaware of this 'language package' thing. It'd, hence, remain the responsibility of the library owner to take care of that. |
One fun thing I learned yesterday -- the It is guarded inside an |
@laurenskling This sounds interesting. Can you provide an example and more code with your webpack configuration. What's the size of your bundled JavaScript file? |
I've created an example package which will prove my theory: https://github.com/laurenskling/moment-treeshaking running production mode will drop the language support. |
@laurenskling Thanks for providing the example for us. Running your code results in a Can you give us more infos about your results? |
hm, you're right. It still lives in the bundle. And it doesn't work. Awesome :P |
The |
@Kovensky Do you mean this part? https://github.com/moment/moment/blob/develop/src/lib/locale/locales.js#L51-L60 |
So is this still a problem with webpack2 and should we merge some code in moment to fix this :) |
I resolved this issue in my project in a different way, I have used following is my webpack config
In our application user can select any locale, so we need to load them dynamically. using above solution I can achieve that Cheers |
To the next person trying to get one of the above configurations to work (which they did not for me): While trying to fix things, I accidentally stumbled upon the documentation page for the ContextReplacementPlugin showing exact this case (momentjs) as an example and it worked fine for me :-)
` |
I ran into this issue trying to use moment.js in my Angular Universal project. Since I am only interested in using it on the client for now, my workaround has been simply to inject the
Then using it in my client-side js by declaring it first:
It's not pretty, but it meets my needs for now. |
To use for global scope (access with window.moment) with webpack loader Install Add a loader: {
test: require.resolve('moment'),
use: [
{
loader: 'expose-loader',
options: 'moment'
}
]
}, import from entry files import 'moment' |
How the !@#$!@#$ is this still a problem? |
it just doesnt work!!! |
Since this doesn't really have anything to do with webpack at this point I think it's best to close this issue. If anyone would like to create a guide on webpack.js.org they can submit a PR to GitHub.com/webpack/webpack.js.org |
Hi, I'm using some libraries and each one is bundling its own version of moment. How would I avoid duplication with webpack so that I bundle only one version of moment? |
Can't personally vouch for it but have read about ⏰ Day.js 2KB immutable date library alternative to Moment.js with the same modern API https://github.com/iamkun/dayjs reference: moment/moment#2373 (comment) |
I'm from the moment.js (http://github.com/moment) team, and some of our users that are also your users voice concerns that because of the way webpack is implemented all moment locale files (currently 104) are bundled together, and that increases the size of what is downloaded to the browser.
Recently there was a suggested "fix" in the moment code (moment/moment#3344), but then we figured it broke the require mechanism for other environments.
Also we happen to have no instructions on how to use moment and webpack (like here: http://momentjs.com/docs/#/use-it/).
Can you please give us a hand by saying what is the right way to use moment with webpack, so it won't include all locale files if the user wants so. I hope this will decrease number of issues sent to both projects :)
Note: A webpack user suggested the following: moment/moment#1435 (comment) but nobody has documented it yet: moment/momentjs.com#269
The text was updated successfully, but these errors were encountered: