Как экспортировать модуль, который работает глобально и для импорта 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 и typcript довольными тем, что они находят объект с экспортом по умолчанию?

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;

, если хотите сделать его доступным глобально в этой форме.Я не думаю, что есть опция веб-пакета, чтобы сделать это автоматически при экспорте в качестве глобального.

, потому что window.ReactCrop.ReactCrop это брутто

Вы можете использовать window.ReactCrop.default вместо.