Build module to use it in environment without modules

Question

Our application uses TypeScript's namespaces and do not use any kind of modules. We want to use react-datepicker, which is written using modules.

For example, it contains the next code:

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import onClickOutside from 'react-onclickoutside';
import moment from 'moment';
import { Manager, Popper, Target } from 'react-popper';
...
export default DatePicker;

Or transpiled:

var React = _interopDefault(require('react'));
var PropTypes = _interopDefault(require('prop-types'));
var classnames = _interopDefault(require('classnames'));
var onClickOutside = _interopDefault(require('react-onclickoutside'));
var moment = _interopDefault(require('moment'));
var reactPopper = require('react-popper');
...
exports['default'] = DatePicker;

It is required to build some js-bundle for this package, that will contain react-datepicker itself as global variable DatePicker, and all its dependecies, besides react, moment, classnames.

These libraries are already added to the application as global variables (React, moment, classNames), so it should use these global variables.

Is there some plugins and techniques for rollup, webpack, etc. that can help to build such bundle?

Answer 1

You can achieve this with rollup, you would need to use its external and globals option like this:

external: ['react', 'react-dom', 'moment', 'classnames'],
globals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'classnames': 'classNames',
    'moment': 'moment'
},

Depending on the source file you're using, you might need to use these 2 plugins:

import commonjs from "rollup-plugin-commonjs";
import resolve from 'rollup-plugin-node-resolve';

Also, you might need to use rollup-plugin-replace because react-datepicker seems to include process.env.NODE_ENV in its code, and you will need to remove that.

In case you would like to see a full working example, check this repo I created: https://github.com/mxcoder/rollup-iife-react-datepicker