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捆绑包，该捆绑包将包含react-datepicker本身作为全局变量DatePicker及其所有依赖项，除了react，{{1} }，moment。

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

是否有一些classNames，rollup等插件和技术可以帮助建立这样的捆绑软件？

Answer 1

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

WRITE_EXTERNAL_STORAGE

根据您使用的源文件，您可能需要使用以下两个插件：

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

此外，您可能需要使用import commonjs from "rollup-plugin-commonjs"; import resolve from 'rollup-plugin-node-resolve';，因为react-datepicker似乎在其代码中包含了rollup-plugin-replace，您将需要删除它。

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

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

1 个答案: