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

Модули 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)

Answer 2

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

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

Удалите упаковку IIFE и экспортируйте то, что вы присваивали.

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

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