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

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 ，时刻，类名。

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

是否有一些用于 rollup、webpack 等的插件和技术可以帮助构建此类 bundle ？

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