如何導出在全局范圍內可用於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 。