从对象导入属性答案

【问题标题】：Import properties from an object从对象导入属性
【发布时间】：2016-07-27 07:42:43
【问题描述】：

我正在尝试从函数文件中导入单个函数。函数文件如下所示。

const Functions = {
    url(path = '') {
        path = path.replace(/^\/+/, '');
        return `${document.baseURI}/${path}`;
    },

    asset(path = '') {
        return this.url(path);
    }
};

export default Functions;

然后我尝试像这样导入url 函数。

import {url} from "../Utils/Functions";

当我这样做时，我在浏览器中从 browserify 收到以下错误。

Uncaught TypeError: (0 , _Functions.url) 不是函数

根据MDN 文档，此导入应该像url 在Functions 对象中一样工作。

我做错了什么？

【问题讨论】：

import url from "../Utils/Functions"; 会为你工作

标签： javascript ecmascript-6

【解决方案1】：

您所做的 - 导出了一个对象。

在这种情况下，您需要导入一个对象并访问其属性：

import Functions from "../Utils/Functions";
Functions.url();

如果您想进行命名导出 - 您需要更改导出和定义它的方式：

function url(path = '') {
    path = path.replace(/^\/+/, '');
    return `${document.baseURI}/${path}`;
}

function asset(path = '') {
    return this.url(path);
}

export { url, asset };

或

export function url(path = '') {
    path = path.replace(/^\/+/, '');
    return `${document.baseURI}/${path}`;
}

export function asset(path = '') {
    return this.url(path);
}

另外注意：它不是解构的，尽管看起来很相似。标准将其命名为ImportsList，并定义了自己的语义，与解构不同。

参考资料：

【讨论】：

我错误地认为可以在导入的对象上使用解构。
@Enijar 事情是这样的 - 它不是解构的，即使它看起来有点相似。

【解决方案2】：

如果你使用“默认导出”，那么导入应该是：

import Functions from "../Utils/Functions";

实际上，你可以使用任何你喜欢的标识符来导入它（不仅仅是“函数”）

【讨论】：