es6-module默认导出导入为未定义

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就是undefined。如果我将文件更改为此：

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

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

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

Answer 1

我认为有关此问题有两件事：

1. 命名导出后，您可以通过将其导入为库或破坏对象来访问它们。

方法1

xyz.js

export const a = 1;

abc.js

import {a} from "xyz";

方法2

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 };

希望这会帮助你。欲了解更多详情，请参阅本