我如何导出 es6 IIFE？

Question

const renderTask = (task) => {
  if (task) {
    const li = `<div class="li"><span><input type="checkbox">${task.description}</span><svg height="15" width="15" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
          </svg></div>`;
    ul.innerHTML += li;
  }
};

renderTask();

export { renderTask as default };

上面的代码工作得很好，但是当我将它重构为下面的代码时，我得到一个 eslint 错误说 Parsing error: Export 'renderTask' is not defined. .

const ul = document.querySelector('.ul');

(renderTask = (task) => {
  if (task) {
    const li = `<div class="li"><span><input type="checkbox">${task.description}</span><svg height="15" width="15" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
          </svg></div>`;
    ul.innerHTML += li;
  }
})();

export { renderTask as default };

我需要一个加载器还是有一种特殊的方法来导出这些类型的函数？

Answer 1

既然你想要默认导出，你可以把整个东西放在 export default 之后。既然你还希望能够引用函数并调用它，除了导出它，如果你真的想走IIFE路线，在IIFE内部定义它，调用它，然后return它。

export default (() => {
    const renderTask = (task) => {
        if (task) {
            const li = `<div class="li"><span><input type="checkbox">${task.description}</span><svg height="15" width="15" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
          </svg></div>`;
            ul.innerHTML += li;
        }
    };
    renderTask();
    return renderTask;
})();

但是在 ES6 模块中不需要 IIFE - 无论如何，顶层模块的范围仅限于模块。在您的第一个代码段中没有任何内容泄漏到全局范围内，而且发生的事情更清楚，因此您可能更喜欢它。

IIFE 在模块外部很有用，当在顶层定义某些东西时会污染全局范围，但这不是您在模块中必须担心的事情。模块内部唯一的全局变量是您显式分配给 window（或任何全局对象）的变量，这里没有这样做。

我如何导出 es6 IIFE？

How do i export an es6 IIFE?

javascript

iife

es6-modules