当前位置：首页 > news >正文

require 与 import 两种引入模块方式到底有什么区别？

news 2025/7/18 10:16:22

关于JavaScript 的模块化规范，可以移步至：【JavaScript高级】模块化规范「一文让你彻底搞懂前端模块化规范 & 区别」

下面进入正题

`require` 与 `import` 两种引入模块方式，到底有什么区别呢？

大致可以分为以下几个方面：

一、写法上

require/exports 的用法：

const path = require('path')
exports.path = path
module.exports = path

import/export 的用法：

import path from 'path'
import {default as path} from 'path'
import * as path from 'path'
import { dirname } from 'path'
import { dirname as dir } from 'path'
import path, {dirname} from 'path'export default path
export const path
export function dirname
export {dirname}
export * from 'path'

二、执行顺序

require：不具有提升效果，到底加载哪一个模块，只有运行时才知道。
```
const path = './' + fileName;
const myModual = require(path);
```

import：具有提升效果，会提升到整个模块的头部，首先执行。

// import 的执行早于foo的调用。本质就是 import 命令是编译阶段执行的，在代码运行之前。foo();import { foo } from 'my_module';

三、输入值的区别

require 输入的变量，基本类型数据是赋值，引用类型为浅拷贝，可修改。

import 输入的变量都是只读的，如果输入 a 是一个对象，允许改写对象属性。

// a.js
let obj = {foo() {console.log('obj...foo');}
}
export {obj
}// b.js
import { obj } from '/a.js'// 非法操作
obj = {}; // Syntax Error : 'a' is read-only; 
// Uncaught TypeError: Assignment to constant variable.// 合法操作
obj.foo = 'hello';

四、是否可以使用表达式或变量

require：可以使用表达式和变量

let a = require('./a.js')
a.add()let b = require('./b.js')
b.getSum()

import：静态执行，不能使用表达式和变量，因为这些都是只有在运行时才能得到结果的语法结构。

// 报错
import { 'f' + 'oo' } from 'my_module';// 报错
let module = 'my_module';
import { foo } from module;// 报错
if (x === 1) {import { foo } from 'module1';
} else {import { foo } from 'module2';
}

总结

require/exports 和 import/export 本质上的区别，实际上也就是 CommonJS 规范与 ES Module 的区别。

浏览器在不做任何处理时，默认是不支持 import 和 require；
babel 会将 ES6 模块规范转化成 CommonJS 规范；
webpack、gulp 以及其他构建工具会对 CommonJS 进行处理，使之支持浏览器环境
它们有三个重大差异。
- CommonJS 模块输出的是一个值的拷贝，ES Module 输出的是值的引用。
- CommonJS 模块是运行时加载，ES Module 是编译时输出接口。
  
  导致该差异是因为 CommonJS 加载的是一个对象（即 module.exports 属性），该对象只有在脚本运行完才会生成。而 ES Module 不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
- CommonJS 模块的 require() 是同步加载模块，ES Module 的 import 命令是异步加载，有一个独立的模块依赖的解析阶段。