是否可以将自调用函数导出为命名空间？

Question

我正在尝试将一个文件中的命名空间定义为：

let editor = (()=>{
    var editorVisible = false;
    var toggleEditor = ()=>{};
    var initEditor = ()=>{};
})();
export default editor;

并将其导出到另一个：

import {editor} from '@src/components/editor';
console.log(editor); //<= undefined

但是无论我做什么，尽管 webpack 编译没有错误，但它总是未定义。

Answer 1

关键是“一个文件”。所以你的模块文件本质上是一个命名空间，所以你不需要 IIFE，只需使用常规模块：

var editorVisible = false;
var toggleEditor = ()=>{};
var initEditor = ()=>{};

export var editor = {
  get editorVisible() { return editorVisible; },
  toggleEditor, initEditor
};

<script type="module" data-info="https://stackoverflow.com/a/43834063">let l,e,t
='script',p=/(from\s+|import\s+)['"](#[\w\-]+)['"]/g,x='textContent',d=document,
s,o;for(o of d.querySelectorAll(t+'[type=inline-module]'))l=d.createElement(t),o
.id?l.id=o.id:0,l.type='module',l[x]=o[x].replace(p,(u,a,z)=>(e=d.querySelector(
t+z+'[type=module][src]'))?a+`/* ${z} */'${e.src}'`:u),l.src=URL.createObjectURL
(new Blob([l[x]],{type:'application/java'+t})),o.replaceWith(l)//inline</script>

<script type="inline-module" id="editor">
  var editorVisible = false;
  var toggleEditor = ()=>{};
  var initEditor = ()=>{};

  export var editor = {
    get editorVisible() { return editorVisible; },
    toggleEditor, initEditor
  };
</script>

<script type="inline-module">
  import {editor} from '#editor';
  console.log(editor.editorVisible);
</script>