ES6 中如何使用 import 引入其他模块

随着前端开发的不断发展，我们需要在项目中使用大量的模块，模块化开发已经成为前端开发中的必要技能。ES6 中新增了 import 关键字来引入其他模块，本文将介绍如何使用 import 关键字和一些注意事项。

为什么需要模块化开发

在 JavaScript 的早期版本中，所有代码都是在一个全局作用域中运行。这种方式在小型项目中使用还可以，但在大型项目中，这样做会导致代码的维护和复用非常困难，因为很容易发生命名冲突和代码重复的问题。

为了解决这些问题，模块化开发出现了。模块化开发是将代码分割成模块，每个模块具有自己的作用域和命名空间，这样可以更好地管理和复用代码。

ES6 中的 import

ES6 中新增了 import 关键字来引入其他模块。下面是一个简单的示例：

// 引入 lodash 模块
import _ from 'lodash'
// 使用 lodash 中的方法
_.forEach([1, 2, 3], function(value) {
  console.log(value)
})

在这个示例中，我们使用 import 关键字引入了 lodash 模块，并使用其中的 forEach 方法遍历数组。

import 的语法

import 的基本语法如下：

import defaultExport from "module-name";

其中：

• defaultExport：模块中默认导出的变量名。
• module-name：要引入的模块名。

如果需要同时引入多个模块，可以使用如下语法：

import { namedExport1, namedExport2 } from "module-name";

其中：

• namedExport1、namedExport2：模块中导出的具名变量名。
• module-name：要引入的模块名。

如果需要引入所有导出的变量，可以使用如下语法：

import * as moduleAlias from "module-name";

其中：

• moduleAlias：要使用的模块别名。
• module-name：要引入的模块名。

默认导出和具名导出的使用示例如下：

// 引入一个默认导出和一个具名导出
import myModuleDefault, { namedExport } from './myModule'
// 使用导出的变量
console.log(myModuleDefault)
console.log(namedExport)

注意事项

在使用 import 引入模块时，需要注意以下几点：

1. 模块名必须是字符串字面量或变量，不能是表达式。

// 错误的引入方式
let moduleName = './myModule'
import myModule from moduleName

// 正确的引入方式
import myModule from './myModule'

1. 在一个模块中，只能使用一个 default 关键字。

// 错误的模块定义
export default function() {}
export default class {}

// 正确的模块定义
export function myFunction() {}
export class myClass {}
export default myFunction

1. 如果导入的模块不在当前目录下，需要使用相对路径或绝对路径指定模块的位置。

// 相对路径引入
import myModule from './myModule'

// 绝对路径引入
import myModule from '/src/myModule'

总结

模块化开发是前端开发中的必要技能。ES6 中新增了 import 关键字来引入其他模块。本文介绍了 import 的基本语法、注意事项以及使用示例。当我们掌握了模块化开发的技能，可以更好地管理和复用代码，提高代码质量和开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c713d710032fedd3905f95