Module加载

import 和 require 是两种不同的模块加载机制。在同一个文件中，不能同时使用 import 和 require 加载模块。此外，import 更适用于浏览器环境，而 require 更适用于 Node.js 环境。

介绍

• require 是 CommonJS 规范中定义的模块加载方法。它是 Node.js 最早支持的模块加载方式，并且可以通过使用构建工具（例如 Webpack、Browserify、Rollup 等），可以将使用 require 的代码转换为浏览器可执行的代码,以实现模块加载功能。这些构建工具会将 require 语句转换为适用于浏览器的模块加载语法，并将所需的模块打包到一个或多个文件中。例如，使用 Webpack 可以将包含 require 的代码打包为浏览器可用的 JavaScript 文件。

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

  require 会将指定的模块加载并执行，然后将模块的导出对象赋值给变量。require 从指定路径中查找模块文件，使用字符串参数指定要加载的模块路径，并返回模块的导出对象。

• import 是 ECMAScript 2015（ES6）中引入的模块加载语法。它是 JavaScript 中的官方模块加载方式，主要用于浏览器环境中，并且需要使用 Babel 等工具进行转译后才能在较旧的环境中使用。import 是一个异步的方法，它使用字符串参数指定要加载的模块路径，并通过 from 关键字指定模块的相对路径或模块的名称。import 会将指定的模块加载并执行，然后将模块的导出内容绑定到变量上（使用 default 关键字导出的内容可以直接绑定到变量，使用 export 关键字导出的内容需要通过花括号指定导出的名称）。

加载和执行

• require 在代码执行阶段执行,是一种同步加载模块的方式。当 Node.js 解析到 require 语句时，会立即加载并执行对应的模块，并将模块的导出对象返回给变量。require 是一种阻塞式加载方式，即在模块加载完成之前，后续的代码不会执行。

• import 在代码解析阶段执行，一种异步加载模块的方式。当 JavaScript 解析器遇到 import 语句时，会生成一个模块依赖关系图，并在后续的阶段中异步加载和执行模块。这意味着在代码执行过程中，import 语句不会立即执行模块加载操作，而是在解析阶段进行静态分析和依赖收集。

  import 语句会先执行模块的解析和依赖收集，然后向浏览器或工具发送异步请求，加载所需的模块文件。一旦模块文件加载完成并解析成功，模块的导出内容将会被绑定到相应的变量上，然后代码继续执行。

运行环境

在标准的浏览器环境中，浏览器不支持 CommonJS 的模块加载机制，所以直接使用 require 是无法正常工作的。浏览器环境中主要使用的是 ECMAScript 模块系统，即使用 import 和 export。

在 Node.js 中，require 可以在函数内部或条件语句中使用。由于 require 是在运行时执行的同步操作，它可以根据需要在代码的任何位置进行调用。

例如，在函数内部使用 require 加载模块：

function myFunction() {
  const fs = require('fs');
  // 其他代码...
}

在条件语句中使用 require 加载模块：

if (someCondition) {
  const myModule = require('./myModule');
  // 其他代码...
} else {
  const anotherModule = require('./anotherModule');
  // 其他代码...
}

虽然 require 可以在函数内部或条件语句中使用，但模块的加载是同步进行的，这可能会导致性能问题，如果频繁在函数内部或条件语句中使用 require，可能会导致模块加载的重复和不必要的性能开销。因此，在实际使用中，建议将模块的加载操作放在模块的顶层作用域中，以提高代码的可读性和性能。