如何使用 import 导入模块？

推荐答案

在 ECMAScript 中，使用 import 语句可以导入模块。以下是几种常见的导入方式：

1. 导入整个模块：

   import * as moduleName from 'module-path';

   这种方式会将模块中的所有导出内容作为一个对象导入，可以通过 moduleName 访问模块中的内容。

2. 导入模块的默认导出：

   import defaultExport from 'module-path';

   如果模块有默认导出（使用 export default），可以使用这种方式导入默认导出的内容。

3. 导入模块的命名导出：

   import { namedExport1, namedExport2 } from 'module-path';

   这种方式可以导入模块中通过 export 导出的特定命名内容。

4. 导入模块的命名导出并重命名：

   import { namedExport as alias } from 'module-path';

   这种方式可以导入模块中的命名导出，并将其重命名为 alias。

5. 同时导入默认导出和命名导出：

   import defaultExport, { namedExport1, namedExport2 } from 'module-path';

   这种方式可以同时导入模块的默认导出和命名导出。

本题详细解读

1. 导入整个模块

当你需要导入一个模块中的所有内容时，可以使用 import * as moduleName from 'module-path';。这种方式会将模块中的所有导出内容作为一个对象导入，你可以通过 moduleName 访问模块中的内容。

// www.javascriptcn.com code example
// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import * as math from './math.js';

console.log(math.add(2, 3)); // 输出: 5
console.log(math.subtract(5, 2)); // 输出: 3

2. 导入模块的默认导出

如果模块有默认导出（使用 export default），可以使用 import defaultExport from 'module-path'; 来导入默认导出的内容。

// www.javascriptcn.com code example
// math.js
export default function add(a, b) {
  return a + b;
}

// main.js
import add from './math.js';

console.log(add(2, 3)); // 输出: 5

3. 导入模块的命名导出

如果模块中有多个命名导出，可以使用 import { namedExport1, namedExport2 } from 'module-path'; 来导入特定的命名导出。

// www.javascriptcn.com code example
// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add, subtract } from './math.js';

console.log(add(2, 3)); // 输出: 5
console.log(subtract(5, 2)); // 输出: 3

4. 导入模块的命名导出并重命名

如果你希望导入模块中的命名导出并为其指定一个新的名称，可以使用 import { namedExport as alias } from 'module-path';。

// www.javascriptcn.com code example
// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add as sum } from './math.js';

console.log(sum(2, 3)); // 输出: 5

5. 同时导入默认导出和命名导出

如果你需要同时导入模块的默认导出和命名导出，可以使用 import defaultExport, { namedExport1, namedExport2 } from 'module-path';。

// www.javascriptcn.com code example
// math.js
export default function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import add, { subtract } from './math.js';

console.log(add(2, 3)); // 输出: 5
console.log(subtract(5, 2)); // 输出: 3

通过以上几种方式，你可以灵活地导入模块中的内容，并根据需要选择不同的导入方式。