【问题标题】:es6-module default export importing as undefinedes6-module 默认导出导入为未定义
【发布时间】:2016-03-30 02:30:25
【问题描述】:

我不确定我在这里缺少什么。我正在使用 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
});

当文件加载时,我得到一个错误,utilsundefined。如果我将文件更改为:

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

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

它工作正常。因此,默认导出语句似乎无法正常工作。会导致此问题的导入或导出语句是否存在明显错误?

【问题讨论】:

  • 没什么明显,没有。
  • 你不会碰巧在某个地方有循环依赖,对吧?
  • @Bergi 我看不到。我在import utils 行之后立即放置了一个断点,变量未定义。我真的很困惑为什么会这样。
  • 是的,这听起来很像循环依赖。你能减少你的模块来创建一个完整的、可重复的例子吗?
  • 什么,一年内@Bergi 的循环依赖建议没有人赞成?!当我导入未定义的东西时,这对我来说完全是这样。谢谢。点赞的评论。

标签: javascript bigcommerce jspm es6-module-loader


【解决方案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';
  1. 默认导出语句不正确

可以是

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

或者

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

希望这会对您有所帮助。更多详情见this

【讨论】:

  • 我认为这是不对的。根据文档(我认为),我显示的默认导出语法很好,我尝试了您的第一个默认导出示例,但仍然没有解决问题。
猜你喜欢
  • 2019-11-16
  • 1970-01-01
  • 2018-10-19
  • 1970-01-01
  • 2021-01-09
  • 2016-06-03
  • 2014-09-15
  • 2016-06-24
  • 2018-04-17
相关资源
最近更新 更多