オブジェクトからプロパティをインポートする

Question

関数ファイルから1つの関数をインポートしようとしています。関数ファイルは次のようになります。

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) is not a function

urlがFunctionsオブジェクトであるようMDNドキュメントによれば、このインポートは動作しなければなりません。

私は間違っていますか？

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

：similに見えるにもかかわらず、構造化代入されていませんar。この標準ではImportsListという名前が付けられており、それ自体の意味論が定義されています。

参考文献：

• https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
• http://www.ecma-international.org/ecma-262/6.0/#sec-imports

Answer 2

あなたは 'デフォルトのエクスポート' を使用している場合、インポートは次のようになります。

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

実際には、あなたが好きな任意の識別子（「関数」だけでなく）でインポートすることができます