webpack的 rquire.context用法实现工程自动化的方法


Posted in Javascript onFebruary 07, 2020

最近仿写一个项目,如下目录,base内部都是一些基础的组件,但是并没有在main.js 中使用常规的方式去全局注册的,刚开始还不明白没有注册的组件怎么在全局使用的

项目目录

webpack的 rquire.context用法实现工程自动化的方法

//main.js
import global from './utils/global'
Vue.use(global)
//解释:如果自动化的代码直接写在一个js文件中直接全局的引入main.js 中也是没有问题的,
//但是这里是按照自定义插件的方式写下global文件中的就要使用vue的use方法

自定义global插件,通过全局的Vue.use(global)来调用

//global.js
import {
 Input,
 Dialog,
} from "element-ui"
import VueLazyload from "vue-lazyload"
import Meta from 'vue-meta'
import * as utils from "./index"

export default {
 install(Vue) {
 const requireComponent = require.context(
  "@/base",
  true,
  /[a-z0-9]+\.(jsx?|vue)$/i,
 )
 //console.log(requireComponent);
 //console.log(requireComponent.keys(),)
 //console.log(requireComponent.resolve,)
 //console.log(requireComponent.id,)
 //console.log(requireComponent.resolve("./tabs.vue"))
 //console.log(requireComponent("./tabs.vue"));
 //console.log(requireComponent("./tabs.vue") === require("@/base/tabs"));

 
 // 批量注册base组件
 requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)
  const componentName = componentConfig.default.name
  if (componentName) {
   Vue.component(componentName, componentConfig.default ||   
    componentConfig)
  }
 })
 
 Vue.prototype.$ELEMENT = { size: "small" }
 Vue.prototype.$utils = utils

 Vue.use(Input)
 Vue.use(Dialog)
 Vue.use(Meta)
 },
}

解析 require.context

const requireComponent = require.context(
  "@/base",
  true,
  /[a-z0-9]+\.(jsx?|vue)$/i,
 )

require.context返回一个webpack的上下文环境 , 返回的是一个函数,

有三个参数:

  • 要搜索的文件夹目录,(不可以是变量,webpack在编译阶段无法定位目录)
  • 是否还要再搜索他的子目录
  • 匹配文件的正则表达式
require.context(directory, useSubdirectories, regExp);

总结:

  • require.context模块返回一个函数,这个函数可以接受一个参数,
  • require.context 的第一个参数不可以是变量,webpack在编译阶段无法定位到目录
  • 有三个属性和方法, resolve , keys , id
    • resolve 是一个函数,传入文件的路径得到解析后的模块的id
    • keys 是一个函数 , 返回所有文件路径组成的数组
    • id 是上下文环境中包含的模块的id , 可能在使用module.hot.accept (热模块更新)时使用

看下面两幅图片解析的更清晰

webpack的 rquire.context用法实现工程自动化的方法

webpack的 rquire.context用法实现工程自动化的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 表单进行客户端验证demo
Aug 24 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
详解Bootstrap按钮
Jan 04 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
canvas绘制环形进度条
Feb 23 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
JS实现的简单下拉框联动功能示例
May 11 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
JS ES6异步解决方案
Apr 29 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 #Javascript
vue-cli设置css不生效的解决方法
Feb 07 #Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 #Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 #Javascript
JavaScript实现Excel表格效果
Feb 07 #Javascript
js实现自动播放匀速轮播图
Feb 06 #Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 #Javascript
You might like
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
详解Python发送邮件实例
2016/01/10 Python
python3.8下载及安装步骤详解
2020/01/15 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
天游软件面试
2013/11/23 面试题
交通事故赔偿协议书
2014/04/15 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
开学典礼策划方案
2014/05/28 职场文书
无房证明范本
2014/09/17 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
幼儿园个人总结
2015/02/28 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
关于EntityWrapper的in用法
2022/03/22 Java/Android
MySQL transaction事务安全示例讲解
2022/06/21 MySQL