在 JavaScript 中从另一个文件重新导出值

在 JavaScript 中从另一个文件重新导出值

Re-export values from another file in JavaScript

要从 JavaScript 中的另一个文件重新导出值,请确保导出名称 exports asexport {myFunction, myConstant} from './another-file.js和默认 export as export {default} from './another-file.js'这些值可以从重新导出它们的文件中导入。

下面是一个文件示例,该文件具有 2 个命名导出和一个默认导出。

另一个文件.js
// 👇️ named export export function increaseSalary(salary) { return salary + 100; } // 👇️ named export export const department = 'accounting'; // 👇️ default export export default function multiply(a, b) { return a * b; }

以下是如何another-file.js从名为index.js.

索引.js
export {increaseSalary, department, default} from './another-file.js';

上面的示例直接重新导出了 2 个命名导出和默认导出。

这意味着你不能使用increaseSalary并且文件中默认导出,因为我们没有导入它们,我们直接重新导出它们。 departmentindex.js

如果必须使用文件中的值,则还必须导入它们。

索引.js
// 👇️ import (only if you need to use them in index.js) import multiply, {increaseSalary, department} from './another-file.js'; // 👇️ re-export export {increaseSalary, department, default} from './another-file.js'; console.log(multiply(5, 5)); // 👉️ 25 console.log(department); // "accounting" console.log(increaseSalary(100)); // 👉️ 200

重新导出另一个模块的成员的语法是:

索引.js
// 👇️ re-export NAMED exports export {increaseSalary, department} from './another-file.js' // 👇️ re-export DEFAULT export export {default} from './another-file.js'

如果您要重新导出同一文件的成员,则可以将上例中的两行合并为一行。

如果您要从多个文件中重新导出成员,则必须为每个文件使用一行代码。
索引.js
// 👇️ re-export NAMED exports export {increaseSalary, department} from './first-file.js' // 👇️ re-export default export export {default} from './second-file.js'

然后您可以从同一模块导入重新导出的成员。

消费者文件.js
// 👇️ default and named imports (all from index.js) import multiply, {increaseSalary, department} from './index.js'; console.log(multiply(10, 10)); // 👉️ 100 console.log(increaseSalary(100)); // 👉️ 200 console.log(department); // 👉️ "accounting"
这是重新导出值的主要优点 – 您可以从单个模块重新导出多个文件的成员,这将简化您的导入。

您经常看到的模式是 – 从一个名为index.js. 名称index.js很重要,因为您不必index在导入时明确指定名称(在某些环境中)。

然而,这种模式是隐含的,有时不受欢迎。例如,在 Node.js 中,默认模式是显式的,这意味着您必须从中导入,'./index.js'而不允许从中导入'./

一般来说,显式导入 from'./utils/index.js'比import 更好./utils,因为这种语法在更多环境中得到支持,并且更加明显和直接。

您使用的许多文件可能会使用多个实用函数,这些实用函数已被提取到单独的文件中,您可能不希望只为实用函数或常量导入 5 行 – 这是从index.js文件重新导出的时候.