IIFE вдоль модуля ES6

Question

У меня есть библиотека, которая по сути является IIFE, которая устанавливает глобальную переменную, и клиенты должны работать с этой переменной.Итак, в module.js у меня есть что-то вроде

window.myModule = (function(){
    ...

    return {
        foo: foo,
        bar: bar
    }
})();

Я хочу сделать его совместимым с модулями ES6, чтобы я мог сделать

import * as theModule from 'module.js';

так же как

<script src="module.js"></script>

Как это можно сделать?Я помню некоторые библиотеки, которые были такими (даже AMD-совместимыми), но я даже не знаю, что искать.

Answer 1

Вам не нужно сопоставлять код, который вы пишете, с кодом, который вы предоставляете другим: последний вопрос - инструментальный.

Пишите модули ES, а затем используйте что-то вроде this , чтобы обеспечитьчто-то для ваших пользователей, которые они могут легко использовать с помощью метода по своему выбору: commonJS, AMD, global, их выбор без дополнительной работы с вашей стороны, кроме шага конвейера сборки.

Удалите оболочку IIFE и экспортируйте чтоВы назначаете.

Примечание о веб-пакете:

Веб-пакет использует синтаксис ... ES2015-ish для модулей, которые на самом деле не работают, например, <script type="module">.Поскольку на данный момент webpack является практически отраслевым стандартом, я бы не упомянул об этом.К сожалению, с настройкой выше это не так уж хорошо.Насколько я знаю, это все еще открытая проблема.

Answer 2

Модули ES6, IMHO, были вдохновлены ценностью IIFE, инкапсуляция является важным преимуществом.Таким образом, рефакторинг IIFE может быть простым.

Сначала вы можете удалить обертку IIFE (вам не нужно это делать, но ее не выгодно, и вам, возможно, следует быть осторожным, поскольку возможности дляаргументы, которые вы передаете, могут отличаться)

Если вы знаете, что библиотека предназначена только для браузера и хотите поддерживать обратную совместимость, вы можете заменить переменную root на window.

Следующая задача - определить публичный API и экспортировать его.Итак, скажем, что некоторые из оригинальных API выглядят так:

root.MyLib.prototype.somePublicFn = function () {...}

Вы экспортируете эту функцию следующим образом

export let somePublicFn = function () {...}

И, когда вы делаете

import * as libFns from 'myLib'

libFns будет действовать как своего рода пространство имен, которое позволит вам сделать,

libFns.somePublicFn(...)

в импортирующем модуле.

И, как я уже упоминал выше, если вы хотите также сделать этот экспорт доступным во всем мире, вам придется вручную подключить его и сделать что-то вроде

const api = {
  somePublicFn
  ...
}
root.MyLib.prototype = Object.assign(root.MyLib.prototype, api)