js使用require 和 import 的区别？

最新推荐文章于 2025-07-11 13:41:52 发布

上海市市花

最新推荐文章于 2025-07-11 13:41:52 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： js

本文链接：https://blog.youkuaiyun.com/wenzhengzheng/article/details/90716145

前端专栏收录该内容

5 篇文章

订阅专栏

博客介绍了JS模块化中require和import的使用。require是CommonJS规范，在导出文件定义module.exports，导入文件用require()引入；import是ES6新语法，要与export结合。还阐述了CommonJS模块与ES6模块的区别，如前者输出值拷贝、运行时加载，后者输出值引用、编译时输出接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

require和import都是为了js模块化而使用的。

一、require

require是commonjs的规规范，node应用由模块组成的，遵从commonjs的规范。

a.js

function test (args) {
  // body...
  console.log(args);	
}
 
module.exports = {
  test
};

b.js

let { test } = require('./a.js');
test('this is a test.');

require的核心概念：在导出的文件中定义module.exports，导出的对象类型不予限定（可为任意类型）。在导入的文件中使用require()引入即可使用。本质上，是将要导出的对象，赋值给module这个对象的exports属性，在其他文件中通过require这个方法来访问exports这个属性。上面b.js中，require(./a.js) = exports 这个对象，然后使用es6取值方式从exports对象中取出test的值。

二、impoort

import是es6为js模块化提出的新的语法，import （导入）要与export（导出）结合使用。

a.js

export function test (args) {
  // body...
  console.log(args);	
}
 
// 默认导出模块，一个文件中只能定义一个
export default function() {...};
 
export const name = "lyn";

b.js

// _代表引入的export default的内容
import _, { test, name } from './a.js';
 
test(`my name is ${name}`);

三、commonjs模块与ES6模块的区别

1.commonjs输出的，是一个值的拷贝，而es6输出的是值的引用；

2.commonjs是运行时加载，es6是编译时输出接口；