ES6模块默认导入为未定义问题

Question

我不确定我在这里缺少什么。我正在使用 jspm 和 es6-module-loader 完成一个项目。我定义了一个模块，如下所示：

import hooks from './hooks';
import api from './api';
import tools from './tools';

const StencilUtils = {
    hooks: hooks,
    api: api,
    tools: tools,
};

export {hooks, api, tools};
export default StencilUtils;

/* global define */
(function(root) {
    if (typeof define === 'function' && define.amd) {
        define(function() {
            return (root.stencilUtils = StencilUtils);
        });
    } else if (typeof module === 'object' && module.exports) {
        module.exports = StencilUtils;
    } else {
        window.stencilUtils = StencilUtils;
    }
}(this));

我在另一个文件中导入了这个模块，并使用以下方式：

import utils from 'bigcommerce/stencil-utils';

utils.hooks.on('cart-item-add', (event, form) => {
    // do stuff
});

当文件加载时，我会收到一个错误消息，提示utils未定义。如果我将文件更改为以下内容：

import {hooks} from 'bigcommerce/stencil-utils';

hooks.on('cart-item-add', (event, form) => {
    // do stuff
});

它可以正常工作。因此，似乎默认的导出语句存在一些问题。这里的导入或导出语句是否有明显错误会导致此问题？

- flyingL123

---

没有什么明显的。 - Bergi

你是否出现了循环依赖呢？ - Bergi

是的，两者都会形成循环依赖 - 尽管文件导入自身非常不寻常（并且不会引起此问题）。 - Bergi

我并不知道任何工具，尽管它们不应该很难建立。作为一种策略：圆圈解决了“stencil-utils”和导入它的文件（您会收到错误），因此这是一个好的开始。如果您仍然没有得到任何东西，您可以在每个文件中添加“console.log（“initialising”+__filename）”，以便在收到异常时检查已加载哪些模块和未加载哪些模块的日志。 - Bergi

什么？一年来，对于@Bergi关于循环依赖的建议没有一个点赞吗？当我导入一个未定义的东西时，这对我来说是完全的灾难。感谢你的评论，已点赞。 - Christiaan Westerbeek

Answer 1

我认为这个问题有两个方面：

1. 当你使用命名导出时，你可以通过导入库或对象解构来访问它们。

方法1

xyz.js

export const a = 1;

abc.js

import {a} from "xyz";

方法二

xyz.js

export const a = 1;

abc.js

import {* as myModule} from "xyz";
console.log(myModule.a);

那么在你的情况下

export {hooks, api, tools};

它可以是任何一种

import * as utils from 'bigcommerce/stencil-utils';

或者

import {hooks} from 'bigcommerce/stencil-utils';

2. 默认导出语句不正确

它可以是以下两种形式之一：

export default {
    hooks: hooks,
    api: api,
    tools: tools,
};

或者

const StencilUtils = {
   hooks: hooks,
   api: api,
   tools: tools,
};
export { StencilUtils as default };

希望这能对您有所帮助。有关更多详细信息，请参见这里

- Yashika Garg

---

我认为这不正确。根据文档，我展示的默认导出语法是正确的（我认为），我尝试了你的第一个默认导出示例，但仍然没有解决问题。 - flyingL123