ES6的默认导出函数

Question

我可以在一个文件中导出多个函数吗？ 似乎当我这样做时，第二个函数会覆盖第一个函数。

例如： 在我的index.js文件中：

export default function aFnt(){
    console.log("function a");
}
export default function bFnt(){
    console.log("function b");
}

然后当我在我的文件中导入它：

import aFnt from "./index";

console.log("aFnt : ",aFnt);

console.log的结果是bFnt。

这里具体的情况是什么？我必须为每个函数创建一个新文件吗？那不太实际，有什么解决方法或变通方法吗？

- sisimh

Answer 1

madox2的答案非常适用于导入具有名称的函数。

如果您仍然想要导入默认值，则有另一种技巧：

function a() {}

function b() {}

export default { a, b }

当您导入时：

import myObject from './index.js';

myObject.a(); // function a
myObject.b(); // function b

我希望这能帮到你！

- Bobby Matson

---

很好的方法，谢谢Bobby，有什么区别吗？ - sisimh

如果您正在构建具有许多功能的模块，则最好。 - Bobby Matson

感谢接受！我经常看到一些令人不爽的代码，例如 { myCoolFunction, myOtherCoolFunction, mySuperDuperCoolFunction } from './index';，这可能会变得非常难以处理。 - Bobby Matson

在ES6中，将一个对象导出为默认值是一种反模式。如果你需要一个带有exports的对象，应该使用命名exports并使用import * as myObject from './index.js';。这可以达到相同的目的，而且在使用静态分析和死代码消除工具时效果更好。 - loganfsmyth

@loganfsmyth是正确的。这个答案不应该被接受。当你把所有的函数捆绑成一个默认导出对象时，就像这段代码所做的那样，你强制导入者导入所有函数...使他的捆绑比实际需要的要大得多。只有在第一次使用一个函数时才应该使用默认导出。否则，请使用命名导出，这样人们就可以获取他们需要的函数。 - Stijn de Witt

Answer 2

你可以使用命名导出代替默认导出：

export function aFnt(){
    console.log("function a");
}
export function bFnt(){
    console.log("function b");
}

然后像这样导入：

import {aFnt, bFnt} from "./index";

- madox2

---

这是正确的做法。如果您将所有函数捆绑在一个对象中，即使导入者只需要其中一个函数，他也被迫捆绑所有这些函数。这应该是被接受的答案。 - Stijn de Witt

我想知道为什么 export bFont = () => { } 不起作用，但是 function bFont() { } 起作用。 - chitgoks

@chitgoks，你漏了 const 关键字 - export const bFont = () => { }。加上就可以工作了。 - madox2

Answer 3

有几种方法可以导出和导入对象/函数

export function first() {}
export function second() {}

在其他文件中

import { first, second} from './somepath/somefile/';

如果您想要使用默认导出，在一般情况下，如果文件中只有一个导出项，它应该是默认导出。但如果出于某些原因您想要将两个函数作为默认导出，则需要将它们组合成一个对象，并将该对象作为默认导出。

function first() {}
function second() {}
const funcs= {"first":first,"second":second}
export default funcs;

在其他文件中

import funcs from './somepath/somefile/';
funcs.first();funs.second();

这应该就是了。

- hannad rehman