解释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 的文档中找到。


  • 2017-04-06 14:59:13

    PHP配置文件详解

    PHP是一个简单易学,功能强大的语言,尤其在Web开发,开发效率高,方便快捷。研究一下php.ini了解PHP相关配置会有好处的,对PHP有更加深入的了解。

  • 2017-04-06 15:00:46

    怎么实时查看mysql当前连接数

    今天有一台mysql服务器突然连接数暴增,并且等待进程全部被锁...因为问题解决不当,导致被骂...OTL 总结:以后要快速定位错误,布置解决方案

  • 2017-04-06 15:07:57

    PHP-FPM不完全指南

    fpm启动后会先读php.ini,然后再读相应的conf配置文件,conf配置可以覆盖php.ini的配置。 启动fpm之后,会创建一个master进程,监听9000端口(可配置),master进程又会根据fpm.conf/www.conf去创建若干子进程,子进程用于处理实际的业务。

  • 2017-04-06 15:11:03

    浅析php-fpm 和 mysql 之间的关系详解

    php-fpm 和 mysql 之间的关系估计不做底层开发应用的是不会去考虑分析它们了,如果是的话我们来看一篇关于php-fpm 和 mysql 之间的关系的教程。

  • 2017-04-06 15:15:16

    PHP-FPM配置及使用总结

    PHP-FPM配置及使用总结: PHP-FPM是一个PHP FastCGI的管理器,它实际上就是PHP源代码的补丁,旨在将FastCGI进程管理引进到PHP软件包中,我们必须将其patch到PHP源代码中,然后再行编译才能使用。而现在我们可以在PHP 5.3.2及更新版本中直接开启并使用即可,因为PHP从该版本已经将其收入到软件包中,所以其不再是补丁包的存在了。

  • 2017-04-07 23:18:29

    mac 安装composer

    当你下载了 composer.phar 后,可以将它放在目录中,但每次当你建立新目录时,你必須再复制一个副本到新目录中,这样比较麻烦。所以最佳做法是将它放到 usr/local/bin 目录中中,成为全域指令。