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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
js如何取消事件冒泡
Sep 23 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
微信小程序canvas动态时钟
Oct 22 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
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
Sony CFR 320 修复改造
2020/03/14 无线电
默默小谈PHP&MYSQL分页原理及实现
2007/01/02 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
ThinkPHP路由详解
2015/07/27 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
javascript常用方法总结
2015/05/14 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
python Gabor滤波器讲解
2020/10/26 Python
python中pyqtgraph知识点总结
2021/01/26 Python
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
美术专业自荐信
2014/07/07 职场文书
授权委托书公证
2014/09/14 职场文书
体育教师个人总结
2015/02/09 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫