平时开发中,经常会用到这样一个语句:
import Vue from 'vue';
由于浏览器兼容性问题,通常这个语法是在 webpack 的构建流搭建的项目中执行的,那么这个语句到底做了什么呢?
其实在 nodejs 中,执行 import
就相当于执行了 require
,而 require
被调用,其实会用到 require.resolve
这个函数来查找包的路径,而这个函数在 nodejs 中会有一个关于优先级的算法。先看一下 import Vue from 'vue'
这一句做了什么:
import Vue from 'vue'
解析为const Vue = require('vue')
。require
判断 vue 是否未 nodejs 核心包,如我们常用的:path,fs 等,是则直接导入,否则继续往下走。vue 非 nodejs 核心包,判断 vue 是否未 '/' 根目录开头,显然不是,继续往下走。
vue 是否为 './'、'/' 或者 '../' 开头,显然不是,继续往下走。
以上条件都不符合,读取项目目录下 node_modules 包里的包。
到了第五步,import Vue from 'vue'
就找到了 vue 所在的实际位置了,那么问题来了,node_modules 下的 vue 是一个文件夹,而引入的 Vue 是一个 javascript 对象,那它是怎么取到这个对象呢?
其实对于一个 npm 包,内部还有一个文件输出的规则,先看下 node_modules/vue 下的文件结构是怎么样的:
├── LICENSE ├── README.md ├── dist ├── package.json ├── src └── types
是不是看起来很笼统,其实对于 npm 包,require
的规则是这样的:
查找 package.json 下是否定义了 main 字段,是则读取 main 字段下定义的入口。
如果没有 package.json 文件,则读取文件夹下的 index.js 或者 index.node。
如果都 package.json、index.js、index.node 都找不到,抛出错误
Error: Cannot find module 'some-library'
。
那么看一下 vue 的 package.json 文件有这么一句:
{ ... "main": "dist/vue.runtime.common.js", ...}
到这里就很清晰了:
import vue from 'vue';// 最后转换为const vue = require('./node_modules/vue/dist/vue.runtime.common.js');
而 vue.runtime.common.js 文件的最后一行是:module.exports = Vue;
,就正好跟我们平时使用时的 new Vue({})
是一致的,这就是 import vue from 'vue'
的过程了。
当然,这个是我们平时使用得最多的导入方式,还有其他一些导入规则,都可以在 nodejs 的文档中找到。