javascript - 如何导出一个全局工作的模块以及 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 typescript 更快乐。否则你必须:

import * as ReactCrop from...

要使 babel 将其转换为对象，就目前而言，这是行不通的:

import { getPixelCrop } from... 

然而，当全局使用模块时，它会输出:

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

即用户必须做 window.ReactCrop.ReactCrop访问类(class)。

问题我怎样才能满足这两种情况，以便在全局范围内它仍然是一个函数，因为 window.ReactCrop.ReactCrop很恶心，但允许 { partialImports }并通过找到具有默认导出的对象来让 eslint 和 typescript 开心？

PS 我正在使用 webpack 像这样导出:

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

Answer 1

How can I satisfy both cases so that globally it's still a function

如果您使用 namespace 导入，这是不可能的。命名空间对象永远不是函数。

你可以这样做

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

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

because window.ReactCrop.ReactCrop is gross

您可以改用 window.ReactCrop.default。