当执行 import vue from 'vue' 时发生了什么?
发布网友
发布时间：2024-10-02 13:58
共1个回答
热心网友
时间：2024-10-06 12:55
由于浏览器兼容性问题，通常这个语法是在 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 的文档 中找到。
