ES6 中 import 语法的使用注意事项

随着 JavaScript 的发展，我们已经不再满足于仅仅使用传统的 script 标签来加载 JS 文件。ES6 为我们带来了方便、快捷、模块化的 import 语法。在本文中，我们将深入介绍 ES6 import 语法的使用注意事项。

import 的基本语法

我们先来看一个简单的模块 utils.js，它导出了 add 函数：

// utils.js

export function add(a, b) {
  return a+b;
}

使用 import 语法导入模块：

// index.js

import { add } from './utils.js';

console.log(add(1, 2));

输出结果为：3。

import 语法可以导入命名导出，也可以导入默认导出。下面是一个导出默认模块的例子：

// utils.js

export default function add(a, b) {
  return a+b;
}

// index.js

import add from './utils.js';

console.log(add(1, 2));

加载路径的注意事项

在使用 import 语法时，经常会遇到加载路径的问题。下面是一些注意事项，需要注意：

1. 路径必须以“/”开头。

   相对路径必须以“/”开头，表示相对于根目录。例如：import { add } from '/utils.js';

2. 路径必须以文件扩展名结尾。

   ES6 模块系统使用文件扩展名来判断文件类型，因此在导入时必须明确指定扩展名。例如：import { add } from './utils.js';

3. 路径必须是字符串常量。

   import 语法要求路径必须是字符串常量，因此运行时无法修改导入路径。例如：import { add } from './' + 'utils.js';

循环依赖

循环依赖是指模块循环引用的情况。例如：

// utils1.js

import { add } from './utils2.js';

export function multiply(a, b) {
  return add(a, b) * 2;
}

// utils2.js

import { multiply } from './utils1.js';

export function add(a, b) {
  return multiply(a, b) + 1;
}

这时会导致错误：

Uncaught TypeError: Cannot access 'multiply' before initialization

解决循环依赖的方法之一是重构代码，将循环依赖的代码移动到一个新的模块中。例如，在上述例子中，我们可以将 multiply 函数移到一个新模块中：

// utils3.js

import { add } from './utils2.js';

export function multiply(a, b) {
  return add(a, b) * 2;
}

然后可以修改 utils1.js 和 utils2.js：

// utils1.js

import { multiply } from './utils3.js';

console.log(multiply(2, 3));

// utils2.js

import { add } from './utils3.js';

console.log(add(2, 3));

现在，运行代码将不再报错。

总结

在使用 ES6 的 import 语法时，需要注意路径、循环依赖等问题。优秀的开发者应该能够了解这些注意事项，并使用最好的实践来构建他们的应用程序。

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