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 }并让他们感到满意并保持打字和打字稿快乐具有默认导出功能的对象？

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。

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

1 个答案: