在 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
,并且文件中默认导出,因为我们没有导入它们,我们直接重新导出它们。 department
index.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
文件重新导出的时候.