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 导入的。