require和import的区别

require 和 import 分别是不同模块化规范下引入模块的语句,下文将介绍这两种方式的不同之处。

1.两种方案各有各的限制,需要注意以下几点:

原生浏览器不支持 require/exports,可使用支持 CommonJS 模块规范的 Browsersify、webpack 等打包工具,它们会将 require/exports 转换成能在浏览器使用的代码。

import/export 在浏览器中无法直接使用,我们需要在引入模块的 元素上添加type="module属性。

即使 Node.js 13.2+ 已经支持 import/export,Node.js官方不建议在正式环境使用,目前可以使用 babel 将 ES6 的模块系统编译成 CommonJS 规范(注意:语法一样,但具体实现还 是require/exports)。

2. require/exports 是运行时动态加载,import/export 是静态编译

CommonJS 加载的是一个对象(即 module.exports 属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。- 阮一峰

4. require/exports 输出的是一个值的拷贝,import/export 模块输出的是值的引用

require/exports 输出的是值的拷贝。也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。

import/export 模块输出的是值的引用。JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。

若文件引用的模块值改变,require 引入的模块值不会改变,而 import 引入的模块值会改变。

5.import/export 不能对引入模块重新赋值/定义

6.import/export 只能在模块顶层使用,不能在函数、判断语句等代码块之中引用;require/exports 可以。

7.import/export 导出的模块默认调用严格模式,而require默认不是

参考资料

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 【转】 遵循的模块化规范不一样 模块化规范:即为 JavaScript 提供一种模块编写、模块依赖和模块运行的方案...
    houruyaogeili阅读 3,328评论 0 2
  • 前言 这个问题也可以变为 commonjs模块和ES6模块的区别; 先来一道面试题测验一下:下面代码输出什么 答案...
    IOneStar阅读 750评论 0 2
  • 当前端应用越来越复杂时,我们想要将代码分割成不同的模块,便于复用、按需加载等。 require 和 import ...
    scarqin阅读 892评论 0 2
  • 遵循的模块化规范不一样 模块化规范:即为 JavaScript 提供一种模块编写、模块依赖和模块运行的方案。谁让最...
    shirley_ee84阅读 197评论 0 0
  • 在使用vue项目中都有用到require 和 import 来进行引入模块,这两个只有《JS模块化规范:AMD,C...
    super_wei阅读 2,189评论 0 3