esm模块化语法export from详解

150 阅读1分钟

JavaScript模块系统允许我们将代码分割成可重用的片段。我们可以导出(export)函数、对象或值,以便在其他模块中导入(import)它们。

重新导出单个导出项

moduleA.js:

export const foo = 'Hello from moduleA';

moduleB.js:

export {foo} from './moduleA';

moduleC.js:

import {foo} from './moduleB';

console.log(foo); // 输出: 'Hello from moduleA'

重新导出多个导出项

moduleA.js:

export const foo = 'Hello from moduleA';
export const bar = 'Hi from moduleA';

moduleB.js:

export {foo, bar} from './moduleA';

moduleC.js:

import {foo, bar} from './moduleB';

console.log(foo); // 输出: 'Hello from moduleA'
console.log(bar); // 输出: 'Hi from moduleA'

重新导出所有导出项

moduleA.js:

export const foo = 'Hello from moduleA';
export const bar = 'Hi from moduleA';
export default 'Default export from moduleA';

moduleB.js:

export * from './moduleA';

moduleC.js:

import * as moduleB from './moduleB';

console.log(moduleB.foo); // 输出: 'Hello from moduleA'
console.log(moduleB.bar); // 输出: 'Hi from moduleA'
console.log(moduleB.default); // 输出: 'Default export from moduleA'

重新导出并重命名导出项

moduleA.js:

export const foo = 'Hello from moduleA';

moduleB.js:

export {foo as myFoo} from './moduleA';

moduleC.js:

import {myFoo} from './moduleB';

console.log(myFoo); // 输出: 'Hello from moduleA'

在这些例子中:

  • moduleB.js 通过 export from 语法重新导出了 moduleA.js 中的一个或多个导出项。
  • 这意味着其他模块可以直接从 moduleB.js 导入这些导出项,而不需要知道它们原本是从 moduleA.js 导入的。