ES2015中的有條件出口

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模塊的綁定功能，這種模塊以這種方式設計來處理循環依賴關系，並在此進行了大量解釋。

上面的代碼轉換為

...
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;
}

上述條件要求不會增加生產構建的包大小。