Javascript 如何导出适用于全球的模块以及ES6导入

目前我正在像这样导出：

module.exports = ReactCrop;
module.exports.getPixelCrop = getPixelCrop;
module.exports.makeAspectCrop = makeAspectCrop;
module.exports.containCrop = containCrop;

基本上是获取一个类（函数）并向其中添加非默认导出

这样做的好处是默认导出是一个函数

ReactCrop

。这意味着，当它通过

标记全局包含时，您所期望的就是

窗口。ReactCrop

但是，如果我将其更改为ES6：

export {
  ReactCrop,
  ReactCrop as default,
  getPixelCrop,
  makeAspectCrop,
  containCrop,
};

它被导出为一个对象。这让打字和打字更快乐。否则，您必须：

import * as ReactCrop from...

要使babel将其转换为对象，目前这样做行不通：

import { getPixelCrop } from... 

但是，当全局使用模块时，它会输出以下内容：

window.ReactCrop
{ReactCrop: ƒ, default: ƒ, getPixelCrop: ƒ, makeAspectCrop: ƒ, __esModule: true}

i、 e.用户必须执行

window.ReactCrop.ReactCrop

才能访问该类

问题：我如何满足这两种情况，使它在全局上仍然是一个函数，因为

window.ReactCrop.ReactCrop

是粗略的，但允许

{partialImports}

并让eslint和typescript满意地找到具有默认导出的对象

PS我正在使用webpack这样导出：

output: {
  path: path.resolve('dist'),
  library: 'ReactCrop',
  libraryTarget: 'umd',
  filename: minified ? 'ReactCrop.min.js' : 'ReactCrop.js',
}

我怎样才能满足这两种情况，使它在全局上仍然是一个函数

如果使用命名空间导入，则不可能执行此操作。命名空间对象永远不是函数

但是你可以这样做

import ReactCrop, * as ReactCropNs from "…";
Object.assign(ReactCrop, ReactCropNs);
window.ReactCrop = ReactCrop;

如果你想让它以那种形式在全球范围内可用。我不认为有一个网页选项可以在作为全局文件导出时自动执行此操作

因为

window.ReactCrop.ReactCrop

是粗略的

---

您可以改用

window.ReactCrop.default

。

谢谢，我想唯一的解决方案是自定义网页包导出器或使用额外package.json条目的多个版本。我还将其导出为组件，这样全局用户就可以像使用

React.Component

一样执行

React.Component

。人们很少使用globals，所以作为一个函数尝试使用globals实在是太麻烦了。@Dominic是的，如果你能编写一个自定义的网页包导出器，那么这就是解决方案。顺便说一句，

React

对其导出所做的主要是为了ES5兼容性，而不一定是一个好的ES6实践。