ES6中直接导出已声明函数失败的原因：为何需用export {foo}

Great question—this is a common point of confusion when working with ES modules, so let's break it down clearly.

Why Your First Two Examples Work #

The lines:

export function foo(x) { return x * x; }
export const foo = (x) => { return x * x }

are both examples of declarative exports. In ES module syntax, you can directly export a variable, function, or class at the same time you declare it. The JavaScript engine recognizes this as creating a dynamic binding between the declared identifier (foo) and the module's exported values. These bindings stay linked—if you later reassign foo (using let or var), any imports of foo will automatically see the updated value.

Why export foo Fails #

When you first declare foo and then try export foo, you're hitting a strict ES module syntax rule: the export keyword can't be followed directly by an expression (here, foo acts as an expression that evaluates to its current value).

ES modules are built around identifier bindings, not one-time value copies (unlike CommonJS). This means you need to explicitly tell the engine which existing identifiers you want to expose as exports—and the correct syntax for that is export { foo }.

The Difference Between export { foo } and Declarative Exports #

export { foo } is called a named binding export. It’s functionally identical to the declarative export syntax—both create that same dynamic link between the internal foo and the module's exported foo. The only difference is that declarative exports combine declaration and export into one step, while export { foo } lets you export an identifier you’ve already declared elsewhere in the module.

For example, this works perfectly:

// Declare first
const foo = (x) => x * x;
const bar = (x) => x + x;

// Export multiple identifiers later
export { foo, bar };

What If You Wanted to Export the Value Directly? #

If your goal was to export foo's value as the module's default export, you’d use:

const foo = (x) => x * x;
export default foo;

This creates a binding for the special default export, which is what importers get when they use import foo from './your-module.js'.

内容的提问来源于stack exchange，提问作者gy134340