在一个语句中从 ES6 模块导入 class 和副作用

Question

我有一个模块，它定义了一个 class 并使用该 class 定义了一个自定义元素

class MyElement extends HTMLElement {}
window.customElements.define('my-ele', MyElement);

我可以使用import { MyElement } from './myel.js'; 但这不会注册自定义元素。 我知道我可以使用import './myel.js'; 但后来我没有 class

有没有办法导入 class 并在一个语句中导入副作用？ 我不喜欢这种重复...

import './myel.js';
import { MyElement } from './myel.js';

Answer 1

如果您使用您想要的副作用行为导出 IIFE 作为默认导出和导入，它会起作用。

就像是：

export class MyElement extends HTMLElement {}
export default (() => {
    window.customElements.define('my-ele', MyElement); // the code we want to run
})()

并导入如下：

import _, { MyElement } from './myel.js'; // the import here would run the IIFE