解释vue中import是怎么起作用的

2020-03-04 12:50:20

平时开发中,经常会用到这样一个语句:

import Vue from 'vue';

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

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

  1. import Vue from 'vue' 解析为 const Vue = require('vue')

  2. require 判断 vue 是否未 nodejs 核心包,如我们常用的:path,fs 等,是则直接导入,否则继续往下走。

  3. vue 非 nodejs 核心包,判断 vue 是否未 '/' 根目录开头,显然不是,继续往下走。

  4. vue 是否为 './'、'/' 或者 '../' 开头,显然不是,继续往下走。

  5. 以上条件都不符合,读取项目目录下 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 的规则是这样的:

  1. 查找 package.json 下是否定义了 main 字段,是则读取 main 字段下定义的入口。

  2. 如果没有 package.json 文件,则读取文件夹下的 index.js 或者 index.node。

  3. 如果都 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 的文档中找到。


  • 2020-12-03 10:48:41

    在window10和Linux子系统 WSL如何互传文件

    想将 window下下载的文件上传到 linux 子系统中,如何用命令实现,其实可以将文件直接拖拽到 linux 在window下的目录即可(C:\Users\yunan.hu\AppData\Local\Packages\CanonicalGroupLimited.Ubuntu20.04onWindows_79rhkp1fndgsc\LocalState\rootfs)但是在linux下用命令怎么实现呢?

  • 2020-12-03 16:25:34

    WSL安装及升级WSL2

    幸好我们有了WSL(Windows Subsystem for Linux),顾名思义就是Windows中可以用Linux了,当然命令也会丰富更多,尤其是WSL2的发布,使得更多原来只能在Linux中做的事情现在也可以在Windows中干了。那么接下来我们就分别介绍WSL和WSL2的安装。

  • 2020-12-06 16:46:11

    git撤销pull

    刚刚不小心pull了一下,有错误,想撤回怎么办。

  • 2020-12-06 19:05:13

    visual studio 配置 intellij idea快捷键

    我原本从intellij idea转换到visual studio是因为webstorm没办法远程开发,而visual studio有remote wsl,和remote ssh,看着挺不错的样子。

  • 2020-12-06 20:38:30

    intellij idea远程开发remote

    开发时一般的平台都是windows,但windows对开发极其不友好,一般都会在本地开启虚拟机,安装上linux环境进行项目的部署测试。下面介绍一种windows主机与linux虚拟机代码同步的方法。这个工具适用于jerbrains公司旗下的很多产品,比如idea、webstrom、phpstrom等。但是要注意你安装的IDE必须是专业版的,社区版的IDE是没有这个代码同步功能的哦!