透视 import 和 require 之别，揭示 JavaScript 构建的隐秘世界

前端

2024-01-15 01:12:24

一切的根源在于一个群友提出的问题，恰逢最近在研究 webpack 相关内容，之前并未深入了解过这个问题。网上有不少文章，包括 Vue 官方文档，都建议使用 import，但很少有文章说明原因。

从构建角度看，import 和 require 之间的区别主要体现在以下几个方面：

模块加载方式

import 是 ES6 中引入的模块加载方式，它采用静态加载的方式，在编译时将依赖模块的代码直接嵌入到当前模块中。这种加载方式的好处是，它可以提高代码的加载速度，并且避免了运行时动态加载模块带来的潜在问题。

require 是 CommonJS 中引入的模块加载方式，它采用动态加载的方式，在运行时动态加载依赖模块的代码。这种加载方式的好处是，它可以更灵活地控制模块的加载顺序，并且可以方便地进行模块的热更新。
作用域

import 加载的模块具有块级作用域，这意味着这些模块只能在它们被声明的代码块中使用。这种作用域限制可以防止变量和函数的命名冲突，从而提高代码的可读性和可维护性。

require 加载的模块具有全局作用域，这意味着这些模块可以在任何地方使用。这种全局作用域可以方便地共享变量和函数，但同时也容易导致命名冲突和代码的可读性降低。
依赖管理

import 可以直接在代码中使用，而不需要额外的工具来管理依赖。这使得 import 非常适合于小型项目或个人项目。

require 需要使用专门的工具来管理依赖，如 npm 或 yarn。这些工具可以帮助我们安装、卸载和更新依赖模块，并可以确保依赖模块的兼容性。
兼容性

import 仅适用于支持 ES6 的浏览器和运行时环境。

require 可以适用于所有支持 CommonJS 的浏览器和运行时环境。