迹忆客 专注技术分享

要导入两个具有相同名称的类，请使用 as 关键字重命名其中一个或两个导入，例如 import {Employee as Employee2} from './another-file-2.js';。 as 关键字允许我们更改导入的标识名称。

下面是一个 index.js 文件的示例，它从另外两个文件中导入了 2 个名为 Employee 的类。

import {Employee} from './another-file-1.js';

// 👇️ rename to Employee2
import {Employee as Employee2} from './another-file-2.js';

const emp1 = new Employee('Alice', 100);
console.log(emp1.name); // 👉️ 'Alice'

const emp2 = new Employee2(1, 'web developer');
console.log(emp2.department); // 👉️ 'web developer'

这是 another-file-1.js 的内容。

another-file-1.js

// 👇️ named export
export class Employee {
  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }
}

这是 another-file-2.js 的内容。

another-file-2.js

// 👇️ named export
export class Employee {
  constructor(id, department) {
    this.id = id;
    this.department = department;
  }
}

index.js 文件中的导入路径假定其他文件位于同一目录中。 例如，如果类位于一个目录之上，则必须从“../another-file-1.js”导入。

我们可以使用 as 关键字重命名导入和导出。

例如，我们可以使用不同的名称导出其中一个类。

class Employee {
  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }
}

export {Employee as Employee1}; // 👈️ export as Employee1

我们将 Employee 类的导出重命名为 Employee1，因此现在我们可以将其导入为：

import {Employee1} from './another-file-1.js';

import {Employee as Employee2} from './another-file-2.js';

const emp1 = new Employee1('Alice', 100);
console.log(emp1.name); // 👉️ 'Alice'

const emp2 = new Employee2(1, 'web developer');
console.log(emp2.department); // 👉️ 'web developer'

as 关键字可用于重命名导入和导出。

如果我们的一个或两个类使用默认导出，则不必使用 as 关键字，因为可以在导入时直接重命名默认导出。

another-file-1.js

// 👇️ uses default export
export default class Employee {
  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }
}

现在，我们可以在不使用 as 关键字的情况下将 Employee 类导入为 Employee1。

// 👇️ can directly rename when import (because default export)
import Employee1 from './another-file-1.js';

import {Employee as Employee2} from './another-file-2.js';

const emp1 = new Employee1('Alice', 100);
console.log(emp1.name); // 👉️ 'Alice'

const emp2 = new Employee2(1, 'web developer');
console.log(emp2.department); // 👉️ 'web developer'

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

如果我们尝试在单个文件中使用多个默认导出（用于函数、类、变量），则会出现错误。

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