CommonJS语法中的require寻找‘包’的规则

最近,使用vue-cli时,webpack配置里面配置了:
resolve:{
‘vue$’: ‘vue/dist/vue.esm.js
……
}
只有这样,我们在index.js(这是我的项目里面文件)中引入vue时(require(’vue’))才可以正常使用,不然会报错。

我们下面将讲解一下require时,它是如何搜索包的,这样再进行解释就可以清楚明了了。

类似于windows系统扫描path变量一样:

require也是按照一个变量集的顺序从上到下依次查找。

顺序是:
1. 项目下的node_modules
2. 全局的node_modules
3. 项目根路径(举个栗子:我在根目录下面有一个index.js;在util包下面有一个app.vue;index中要引用它,就可以:require(‘./util/app.vue’),这个路径就是在项目路径下去定位)

从上面可以观察到,如果是require用户自定义的’包’时,那么速度相对要慢一点,因为优先级是最低的

接着说一下如何在这个路径的顺序基础上进行引入。

按照给定的名字在上面的路径下找(如果没有扩展名,默认按照:.js;.json;.node为扩展名去匹配),如果找到的与文件夹名字相同,那么这就是找到了所谓的‘包’,在包下的package.json文件查找一个main属性,并拿到它的值进行寻找对应的文件。如果有,则进行加载;如果没有,那么继续进行寻找,知道三种目录都搜索不到时才进行报错。

那么我们再来回头看一下vue的那个配置,vue/dist/vue.esm.js ,原本main配置里面的是:dist/vue.runtime.common.js。添加这个配置说明vue-cli不需要这个文件,而是需要vue.esm.js。了解了这个规则,那么我们就很容易看懂这些配置了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值