ES模块环境中使用import语句代替require函数以避免“require is not defined in ES module scope, you can use import instead”错误

2024-01-30 16:37:48

ES模块与CommonJS模块：模块化JavaScript的对比

简介

在JavaScript的世界中，模块化是组织和复用代码的一种关键技术。ES模块和CommonJS模块是JavaScript中两种流行的模块化系统，它们提供了不同的方法来管理模块依赖关系。本文将深入探讨这两种模块化系统之间的区别，指导您在ES模块环境中有效地使用import语句。

ES模块和CommonJS模块：差异

ES模块和CommonJS模块之间的主要区别在于它们引入模块的方式。ES模块使用import 语句，而CommonJS模块使用require 函数。此外，ES模块是静态的 ，这意味着它们在运行时是不可变的，而CommonJS模块是动态的 ，可以在运行时被修改。

ES模块：使用import语句

在ES模块环境中，import 语句用于引用模块。其语法为：

import {name} from 'module';

其中，name 是模块中要导入的变量、函数或类，module 是模块的名称。

示例：

要导入名为"myModule"的模块中的"myFunction"函数，可以写成：

import {myFunction} from './myModule';

这将在当前模块中导入myModule模块的myFunction函数。

CommonJS模块：使用require函数

CommonJS模块使用require 函数来引用模块。其语法为：

const module = require('module');

其中，module 是模块的名称。

示例：

要导入"myModule"模块，可以写成：

const myModule = require('./myModule');

这将在当前模块中导入myModule模块。

require函数和import语句的对比

尽管require函数和import语句都用于引用模块，但它们之间存在一些关键差异：

语法不同： import语句使用"{name} from 'module'"语法，而require函数使用"require('module')"语法。
作用域不同： require函数是全局作用域的，而import语句是局部作用域的。这意味着，使用require函数导入的模块可以在任何地方使用，而使用import语句导入的模块只能在当前模块中使用。
加载方式不同： require函数是同步加载的，意味着它会在加载模块之前暂停脚本的执行。import语句是异步加载的，这意味着它不会暂停脚本的执行，而是会在后台加载模块。