从 JavaScript 中的文件导入所有导出

作者

在 JavaScript 中从文件导入所有导出

Import all Exports from a File in JavaScript

要从 JavaScript 中的文件导入所有导出：

  1. 导出您打算从文件导入的所有成员A。
  2. 将文件中的所有导出导入B为
    import * as myObj from './another-file'.
  3. myObj.myFunction()像在 file中一样使用导入的成员B。

下面是从一个名为
another-file.js.

另一个文件.js
// 👇️ all named exports
export const getEmployee = () => {
  return {id: 3, salary: 300};
};

export function getDeveloper() {
  return {name: 'James'};
}

export const department = 'front-end';

下面是我们如何将所有导出导入到一个名为index.js.

索引.js
import * as company from './another-file.js';

const emp = company.getEmployee();
console.log(emp); // 👉️ {id: 3, salary: 300}

const dev = company.getDeveloper();
console.log(dev); // 👉️ {name: 'James'}

console.log(company.department); // 👉️ "front-end"

这种模式称为
创建模块对象
，在导入大量东西时使用。

该语法从中获取所有导出another-file.js，并使它们作为文件company内部调用的对象的成员可用index.js
。

如果必须，请确保更正指向another-file.js 模块的路径。上面的示例假定和位于同一目录中。 another-file.jsindex.js

例如，如果another-file.js位于上一级目录，则必须导入为import * as company from '../another-file.js'.

导入/导出语法称为
JavaScript 模块。

为了能够从不同的文件中导入某些内容，必须使用命名或默认导出来导出它。

上面的示例使用命名导出。

您也可以使用命名导入index.js并明确说明导入的名称。

索引.js
// 👇️ named imports
import {getEmployee, getDeveloper, department} from './another-file.js';

const emp = getEmployee();
console.log(emp); // 👉️ {id: 3, salary: 300}

const dev = getDeveloper();
console.log(dev); // 👉️ {name: 'James'}

console.log(department); // 👉️ "front-end"

上面截取的代码实现了与通过import * as company from './another-file.js'.

这种方法更广泛地使用，因为它更简洁和直接。

您从中导入的模块可能还包含默认导出。

命名和默认导出和导入之间的主要区别是 – 每个文件可以有多个命名导出，但只能有一个默认导出。

如果您从中导入的模块具有默认导出，您可以通过删除其名称周围的大括号或在命名空间上访问它来导入它
myObj.default。

另一个文件.js
// 👇️ default export
export default function sum(a, b) {
  return a + b;
}

以下是您将如何使用模块对象模式导入和使用默认导出。

索引.js
import * as myObj from './another-file.js';

console.log(myObj.default(50, 50)); // 👉️ 100

请注意，默认导出是一个名为 的函数sum，但我们
.default使用此模式访问它。

更直观的方法是直接导入你需要的东西。

另一个文件.js
// 👇️ all named exports
export const getEmployee = () => {
  return {id: 3, salary: 300};
};

export function getDeveloper() {
  return {name: 'James'};
}

export const department = 'front-end';

// 👇️ default export
export default function sum(a, b) {
  return a + b;
}

这是导入所需成员的方法。

索引.js
import sum, {getEmployee, getDeveloper, department} from './another-file.js';

console.log(sum(50, 50)); // 👉️ 100

console.log(getEmployee()); // 👉️ {id: 3, salary: 300}

console.log(getDeveloper()); // 👉️ {name: 'James'}

console.log(department); // 👉️ 'front-end

根据我的经验，大多数真实世界的代码库都专门使用命名导出和导入，因为它们可以更轻松地利用 IDE 进行自动完成和自动导入。

您也不必考虑使用默认导出或命名导出导出哪些成员。

–

发表评论