Question

假设您正在开发一个polyfill，并且如果它已经存在于浏览器中，则不想填充类。如何在ES6中完成？以下内容无效，因为exports不是声明：

if (typeof Foo === 'undefined') {
  export class Foo { ... }
}

如果上述条件评估为false，则导入脚本应该内置浏览器。

Answer 1

export语法必须位于模块的顶级范围内，因为您要声明存在哪些导出。您可以有条件地为它们分配一个值，例如

export let Foo = global.Foo;

if (typeof Foo === 'undefined'){
    Foo = class { ... }
}

Answer 2

export应该是静态的。对于条件导出，可以使用CommonJS模块和exports。

应该以这种方式处理ES6模块：

export let Foo;

if (window.Foo === undefined) {
  Foo = class Foo { ... }
} else {
  Foo = window.Foo;
}

对于与平台无关的解决方案（this可能不等于已转换代码中的全局）window可以替换为

const root = (() => eval)()('this');
if (root.Foo === undefined) {
...

这利用了以这种方式设计的ES6模块的绑定功能to handle cyclic dependencies并大大解释了here。

上面的代码transpiles to

...
var Foo = exports.Foo = void 0;

if (window.Foo === undefined) {
  exports.Foo = Foo = function Foo() {
    _classCallCheck(this, Foo);
  };
} else {
  exports.Foo = Foo = window.Foo;
}

在这种情况下，导出不是有条件的，但绑定到此导出的Foo值是有条件的。

Answer 3

以上方法对Webpack来说对我来说效果不佳。有条件地进行救援会导致Webpack警告，从而使压缩前的捆绑包大小增加20KB。

Webpack插件具有优化功能，可用于生产构建。以下代码对我有用，而没有增加分发包的大小。

let comp = null;
if (process.env.NODE_ENV) {
  comp = require('./MyDevComp').default;
}

上述有条件要求并未增加生产版本的捆绑包大小。

ES2015中的有条件出口

3 个答案: