我们的应用程序使用 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 ?
最佳答案
您可以通过汇总来实现此目的,您需要使用其外部和全局选项,如下所示:
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
关于javascript - 构建模块以在没有模块的环境中使用它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51174118/