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 ajax Load使用缓存的方法小结
Feb 22 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
python中日期和时间格式化输出的方法小结
2015/03/19 Python
使用python 3实现发送邮件功能
2018/06/15 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Python八皇后问题解答过程详解
2019/07/29 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
学习Python需要哪些工具
2020/09/04 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
函授本科毕业生自我鉴定
2013/10/16 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
大学生实习证明范本
2014/09/19 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
单位更名证明
2015/06/18 职场文书
聘任书范文大全
2015/09/21 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS