迹忆客 专注技术分享

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

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

another-file.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;
}

以下是如何从名为 index.js 的文件中重新导出 another-file.js 的导出成员。

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

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

这意味着你不能使用 increaseSalary 、department 和 index.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

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

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

// 👇️ re-export DEFAULT export
export {default} from './another-file.js'

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

如果要从多个文件中重新导出成员，则必须为每个文件使用一行代码。

// 👇️ re-export NAMED exports
export {increaseSalary, department} from './first-file.js'

// 👇️ re-export default export
export {default} from './second-file.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' 导入，而不允许从 './.

一般来说，最好是显式地从'./utils/index.js'导入，而不是 ./utils，因为这种语法在更多环境中得到支持，并且更加明显和直接。

我们使用的许多文件可能会使用多个实用函数，这些实用函数已被提取到单独的文件中，并且您可能不希望只为实用函数或常量导入 5 行 - 这是从 index.js 重新导出时文件进来。