import 和 require的区别

水不腐-枢不蠹

已于 2023-02-02 21:26:24 修改

阅读量169

点赞数

分类专栏： # JS 文章标签： webpack 前端 javascript

于 2023-02-02 21:12:11 首次发布

原文链接：https://zhuanlan.zhihu.com/p/121770261

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文对比了ES6的import/export与CommonJS的require/module.exports在模块导入导出上的差异，包括加载时机、对象修改的影响。import是静态加载，修改会影响源对象，而require是动态加载，修改不影响源对象。在浏览器端，原生支持import/export，而require需要通过工具如webpack转换。

摘要由CSDN通过智能技术生成

import

属于ES6规范，import用于导入，export用于导出，export default默认导出
import在代码编译时被加载，所以必须放在文件开头（感觉和python中import一样，都会被提前编译）
import引入的对象被修改时，源对象也会被修改，相当于值引用

require

属于CommonJS规范（规定了模块的特性和各模块之间如何相互依赖），require()用于加载模块，module.exports用于对外共享数据
require在代码运行时被加载，所以require理论上可以运用在代码的任何地方
require引入的对象被修改时，源对象不会被修改，相当于值拷贝

其他

目前所有的引擎都还没有实现import，import最终都会被转码为require，在webpack打包中，import和require都会变为_webpack_require_
require比import更早出现
CommonJS 模块化方案 require/exports 是为服务器端开发设计的。服务器模块系统同步读取模块文件内容，编译执行后得到模块接口。（Node.js 是 CommonJS 规范的实现）。在浏览器端，因为其异步加载脚本文件的特性，CommonJS 规范无法正常加载。所以出现了 RequireJS、SeaJS 等（兼容 CommonJS ）为浏览器设计的模块化方案。直到 ES6 规范出现，浏览器才拥有了自己的模块化方案 import/export。
原生浏览器不支持 require/exports，可使用支持 CommonJS 模块规范的 Browsersify、webpack 等打包工具，它们会将 require/exports 转换成能在浏览器使用的代码。