如何导出在全局范围内可用于ES6导入的模块

Question

目前，我正在这样导出：

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

基本上采用一个类（函数）并向其添加非默认导出。

这样做的好处是默认导出是一个ReactCrop函数。 这意味着，当通过<script>标记全局包含它时，则期望window.ReactCrop 。

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

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

它作为对象导出。 这使eslint和打字稿更快乐。 否则，您必须：

import * as ReactCrop from...

要使babel将其转换为对象，按原样，这将不起作用：

import { getPixelCrop } from... 

但是，在全局使用该模块时，它将输出以下内容：

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

也就是说，用户必须执行window.ReactCrop.ReactCrop才能访问该类。

问题：如何满足这两种情况，以使全局范围仍然是一个函数，因为window.ReactCrop.ReactCrop是总值，但是允许{ partialImports }并让eslint和打字稿满意，因为他们找到了默认导出的对象？

PS我正在使用webpack导出，如下所示：

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

Answer 1

我如何满足这两种情况，以便在全球范围内仍然是一个功能

如果使用名称空间导入，则不可能。 命名空间对象永远不是函数。

但是你可以做

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

如果您想以该形式在全球范围内使用它。 我不认为有一个webpack选项可以在导出为全局文件时自动执行此操作。

因为window.ReactCrop.ReactCrop是总值

您可以改用window.ReactCrop.default 。