require和import的区别是什么？看这个你就懂了

lemanli 发布于2019-08-22 16:24 / 1202人阅读

摘要：所以，在模块代码执行完之前，根本不知道这个模块到底出了什么东西，这也是和最大的区别，因为是基于关键字的模块化，是可以在解析的过程中就知道导出了什么。

require	import
动态评估	静态评估
再运行时报错	再解析时报错
不是关键词	是关键词

语法 CommonJs

dep.js

module.exports = {
    foo: function () {},
    bar: "a"
}

app.js

var dep = require("dep")
console.log(dep.bar)
dep.foo()

ESM

dep.js

export foo function(){}
export const bar = "a"

app.js

import { foo, bar } from "dep"
console.log(bar)
foo()

加载方式的不同

使用require的时候，其实会将module的代码进行包装，变成如下样子的代码：

function (exports, require, module, __filename, __dirname) {
  const m = 1;
  module.exports.m = m;
}

然后在执行这个方法的时候，我们可以传入：

const module = { exports: {} }
const require = function(){/* ...some module load code here */}
// __filename, __dirname是require的时候提供的路径分析出来的
fun(module.exports, require, module, __filename, __dirname)

执行完成之后，就能通过module拿到方法中向外抛出的变量了。

所以我们可以看到，module、require、exports都不是全局变量，而是专门为这个模块使用的局部变量。

require的时候真正做的事情如下：

Resolution ／解析路径

Loading ／加载代码

Wrapping ／包装

Evaluation ／评估执行

Caching ／缓存

简单来说就是根据require调用时传入的路径，首先要拿到真正的绝对路径（是相对目录的，还是node_modules下面的等等），然后读入代码，包装成上面显示的样子，然后传给vm进行评估执行，得到结果，最后进行缓存。

所以，在模块代码执行完之前，node根本不知道这个模块到底export出了什么东西，这也是和ESM最大的区别，因为ESM是基于关键字的模块化，是可以在解析的过程中就知道导出了什么。

在解析ESM模块的时候，在把代码传给VM执行之前，就可以得到一个叫做Module Record的内部结构，他保存了模块倒出的内容的列表，在你import {f} from f的时候，他其实在你引用的地方和倒出的地方的f之间建立了连接，即它们是指向同一内存的，即便是原始数据类型，你修改模块中的指也会导致引用处的变化。啥意思呢？

// dep.js
export let a = 1
setTimeout(() => a += 1, 500)

// app.js
import { a } from "dep"
setTimeout(function () {
  console.log(a)
}, 1000)

输出的会是2，但是你用require，CommonJs模块来做，就会是1，因为CommonJs是普通的值传递或者引用传递

这就是require和import最大的区别

云服务器 GPU云服务器云计算和大数据是什么?云计算和大数据区别和云服务器有啥区别云服务是什么怎么看linux是什么系统 vps如何看返回结果是什么类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94322.html

三分钟告诉你软件测试工程师到底是不是程序员？读完你就懂了！

摘要：今天我们讨论一个软件测试方面的深刻问题。软件测试人员算是程序员吗大家不要紧张当我们摸不到头脑的时候，度娘是你最好的选择。点来点去基本就完成了测试工作然后上线但是效果往往大跌眼镜。那么现在回到测试人员到底算不算程序员这个问题上来。 ...

EsgynChina 2021-10-11 10:58 评论0 收藏0
正确理解Vuex：懂人生，就懂了Vuex

摘要：人生，远不止是钱。如何管理，一个更复杂的人生人生，就是一个大型应用。把复杂的人间，拆解成了行动与目标。所以，，以及和两个函数，就构成了的逻辑。现在，你不仅完全理解了的设计哲学，你更懂得了如何管理人生。 Veux的哲学，实质上是人生的哲学。看一看这张图。 showImg(https://segmentfault.com/img/remote/1460000018782816?w=424...

URLOS 2019-08-23 16:47 评论0 收藏0
ETM时间塔是做什么的，看完这篇文章你就懂了

摘要：事件去年夺冠，王思聪抽奖。终于说到今天的正题了时间塔是什么它是一个区块链量子随机数发生器。简单地说，时间塔从链上抽取数据，通过一系列高级操作，生成随机数时间塔和有什么关系时间塔是联合知名高校科研机构以及实验室共同开发的科研成果。以前我一直认为，人类的本质是复读机。实际上，我还是过于年轻了，现实的冷水，终于浇醒了我。人类的本质，是鸽子。为什么？你听我说。showImg(https:...

aisuhua 2019-08-30 15:44 评论0 收藏0
闭包？反正看完我就懂了

摘要：闭包反正看完我就懂了想要好好的理解闭包，你得首先理解作用域。其实这个闭包的产生过程可以理解为在里面的匿名函数定义时正处于怀孕阶段，到外面调用时，娃就出生了，娃就是闭包啦。闭包改变了变量的生命周期，变量将得到永生。闭包？反正看完我就懂了想要好好的理解闭包，你得首先理解作用域。别说了，赶紧去看作用域吧，?，这世界就是如此残酷。好，言归正传，我们是来学习闭包的。O(∩_∩)O 什么是闭包...

sean 2019-08-20 18:28 评论0 收藏0
axios的使用

摘要：但是如果你想以的方式传参，则需要做一点改变参考这里注意如果你的请求方法是，又规定了参数格式是，则必须要使用下面这些方法中的一种。 axios是vue官方推荐的http库，详情见官方中文文档。安装： npm install axios 安装依赖： npm install --save axios vue-axios 配置模板： //main.js中 import Vue from vu...

lieeps 2019-08-22 16:23 评论0 收藏0