当执行 import vue from 'vue' 时发生了啥？

Posted 2023-03-23

参考技术A 平时开发中，经常会用到这样一个语句：

由于浏览器兼容性问题，通常这个语法是在 webpack 的构建流搭建的项目中执行的，那么这个语句到底做了什么呢？

其实在 nodejs 中，执行 import 就相当于执行了 require ，而 require 被调用，其实会用到 require.resolve 这个函数来查找包的路径，而这个函数在 nodejs 中会有一个关于优先级的算法。先看一下 import Vue from 'vue' 这一句做了什么：

到了第五步， import Vue from 'vue' 就找到了 vue 所在的实际位置了，那么问题来了，node_modules 下的 vue 是一个文件夹，而引入的 Vue 是一个 javascript 对象，那它是怎么取到这个对象呢？

其实对于一个 npm 包，内部还有一个文件输出的规则，先看下 node_modules/vue 下的文件结构是怎么样的：

是不是看起来很笼统，其实对于 npm 包， require 的规则是这样的：

那么看一下 vue 的 package.json 文件有这么一句：

到这里就很清晰了：

而 vue.runtime.common.js 文件的最后一行是： module.exports = Vue; ，就正好跟我们平时使用时的 new Vue() 是一致的，这就是 import vue from 'vue' 的过程了。

当然，这个是我们平时使用得最多的导入方式，还有其他一些导入规则，都可以在 nodejs 的文档 中找到。

vue中import xxx from 和 import xxx from的区别

参考技术A export与export default均可用于导出常量、函数、文件、模块等
在一个文件或模块中，export、import可以有多个，export default仅有一个
通过export方式导出，在导入时要加 ，export default则不需要
export能直接导出变量表达式，export default不行。

对应js中的引用：

对应js中的引用：

学习借鉴网址：
https://www.itdaan.com/blog/2019/03/20/84ddc905ee15531850de2ff40b4fadc2.html