Moment-timezone: Provide builds & instructions for usage in a ES / Webpack environment

[sbrandwoo]

I'm currently struggling to use moment-timezone in a webpack build. Installing the moment-timezone package will by default pull down the entire timezone data, which in the latest builds is massive and can't realistically be used in a public JavaScript project.

It is suggested in other issues to use a smaller data bundle, but there isn't any clear documentation on how to actually do so.

I have attempted to alias one of the alternative builds (which I believe to be undocumented), but this can result in moment being pulled into the project twice:

resolve: {
    alias: {
        'moment-timezone': path.resolve(
            __dirname,
            'node_modules/moment-timezone/builds/moment-timezone-with-data-2012-2022'
        )
    }
}

It would also be useful to document how to use moment-timezone in an ES environment. I believe the following to be correct:

import moment from 'moment-timezone';

Though this changed in a recent patch version.

Thanks

[gilmoreorless]

Shameless self-promotion here, but I had the same problem with including all the data when I only needed a tiny subset. So I built a webpack plugin to reduce the data for me: https://github.com/gilmoreorless/moment-timezone-data-webpack-plugin

Hopefully it's useful for you.

[jorgeobsidian]

is the webpack plugin equivalent of importing like this? import moment from 'moment-timezone/builds/moment-timezone-with-data-2012-2022';

[gilmoreorless]

It _can_ be equivalent to using that custom import, but it generates its own data files based on configuration. The plugin is more powerful and flexible, but it does mean adding Yet Another Tool to the build chain. If the custom import works fine for your use case, by all means just use that.

To mimic the 2012-2022 data build with the plugin, you would use this setup in the plugins section of your webpack config:

new MomentTimezoneDataPlugin({
  startYear: 2012,
  endYear: 2022,
})

Alternatively, mimicking the new rolling 10-year-range data files (from version 0.5.24 onwards):

new MomentTimezoneDataPlugin({
  startYear: new Date().getFullYear() - 5,
  endYear: new Date().getFullYear() = 5,
})

It can also filter down to include only specific zones if required. But that's enough self-promotion for now.

[jorgeobsidian]

thanks that's helpful. I'm using create-react-app so rather not have to install webpack plugins.
Your plugin looks cool though. Handy for nextjs projects.