为何调用其他模块对象时需重复书写两次todoManager？

你遇到的问题核心是导出时多套了一层对象结构，和webpack无关，属于ES模块导出的基础语法问题：

1. 在toDoCreator.js中，你先定义了一个业务对象：

   const todoManager = { todos: [], createTodo: () => {}, editTodo: () => {} };
   

2. 但导出时，你把这个对象又封装进了一个新对象：

   export default { todoManager };
   

   这相当于导出了一个{ todoManager: 你定义的业务对象 }的嵌套结构。
3. 所以在UI.js中通过import todoManager from './toDoCreator.js'导入的，其实是这个外层的包装对象，必须通过todoManager.todoManager才能拿到真正的业务对象，进而访问它的editTodo或todos成员。

直接导出你定义的业务对象即可，不需要额外包裹：

// toDoCreator.js 修正后的导出代码
export default todoManager;

修正后，在UI.js里就能直接用todoManager.editTodo(caller.id)或者todoManager.todos[todoId]调用对应成员了。

内容的提问来源于stack exchange，提问作者maverickar