构建模块以在没有模块的环境中使用它

Question

我们的应用程序使用 TypeScript 的命名空间，不使用任何类型的模块。我们要使用react-datepicker，它是使用模块编写的。

例如，它包含下一个代码：

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;

或转译：

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;

需要为此包构建一些 js-bundle，它将包含 react-datepicker 本身作为全局变量 DatePicker，以及它的所有依赖项，除了 react、moment、classnames。

这些库已经作为全局变量（React、moment、classNames）添加到应用程序中，因此它应该使用这些全局变量。

rollup、webpack 等是否有一些插件和技术可以帮助构建这样的包？

Answer 1

您可以通过汇总实现此目的，您需要像这样使用其外部和全局选项：

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

根据您使用的源文件，您可能需要使用这 2 个插件：

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

此外，您可能需要使用 rollup-plugin-replace，因为 react-datepicker 似乎在其代码中包含 process.env.NODE_ENV，您需要将其删除。

如果您想查看完整的工作示例，请查看我创建的这个存储库： https://github.com/mxcoder/rollup-iife-react-datepicker

构建模块以在没有模块的环境中使用它

Build module to use it in environment without modules

javascript

typescript

webpack

es6-modules

rollup