require.context
带表达式的 require 语句
如果你的 require参数含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块被导入
require("./template/" name ".ejs");
webpack 解析 require() 的调用,提取出来如下这些信息:
Directory: ./template
Regular expression: /^.*\.ejs$/
则会返回template目录下的所有后缀为.ejs模块的引用,包含子目录。
require.context
可以使用 require.context() 方法来创建自己的(模块)上下文,这个方法有 3 个参数:
- 要搜索的文件夹目录
- 是否还应该搜索它的子目录,
- 以及一个匹配文件的正则表达式。
require.context(directory, useSubdirectories = false, regExp = /^\.\//)require.context("./test", false, /\.test\.js$/);//(创建了)一个包含了 test 文件夹(不包含子目录)下面的、所有文件名以 `.test.js` 结尾的、能被 require 请求到的文件的上下文。require.context("../", true, /\.stories\.js$/);//(创建了)一个包含了父级文件夹(包含子目录)下面,所有文件名以 `.stories.js` 结尾的文件的上下文。
require.context模块导出(返回)一个(require)函数,这个函数可以接收一个参数:request 函数–这里的 request 应该是指在 require() 语句中的表达式
导出的方法有 3 个属性: resolve, keys, id。
- resolve 是一个函数,它返回请求被解析后得到的模块 id。
- keys 也是一个函数,它返回一个数组,由所有可能被上下文模块处理的请求组成。
- id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
Vue 全局组件:
module.exports.install = function (Vue) {/*所有在./components目录下的.vue组件自动注册为全局组件以<mv-***></mv-***>为组件标签名,***是组件的.name,没有name的时候是组件的文件名*/const requireAll = context => context.keys().map(context);const component = require.context('./components', false, /\.vue$/);// const directive = require.context('./directives', false, /\.js$/);requireAll(component).forEach((item) => {const name = (item.name || /(\S \/)(\S )\.vue/.exec(item.hotID)[2]).toLowerCase();Vue.component(`mv-${name}`, item);});};
![](http://www.mk2048.com/web_upload/blog_imgs/9/https___user-gold-cdn-xitu-io_2018_3_26_16261acab3f0650c_w-380_h-252_f-jpeg_s-22544.gif)
/**
* The file enables `@/store/index.js` to import all vuex modules
* in a one-shot manner. There should not be any reason to edit this file.
*/const files = require.context('./modules', false, /\.js$/)
console.log('------------')
console.log(files.keys())
console.log('------------')
const modules = {}files.keys().forEach(key => { modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})console.log('------------')
console.log(modules)
console.log('------------')
export default modules
![](http://www.mk2048.com/web_upload/blog_imgs/9/https___user-gold-cdn-xitu-io_2018_3_26_16261aacaba6b745_w-1274_h-516_f-jpeg_s-93588.gif)
要引入svg下面所有的svg文件: 在该文件(icons)目录下新建一个js文件index.js 写如下代码:
let requireAll = requireContext => requireContext.keys().map(requireContext)
let req = require.context('./svg', false, /\.svg$/)
requireAll(req)
Vue 全局组件
const requireAll = context => context.keys().map(context);const component = require.context('./components', false, /\.vue$/); // false 不遍历子目录,true遍历子目录requireAll(component).forEach(({default:item}) => {console.log(item)Vue.component(`wb-${item.name}`, item);
});
首字母大写
Object.keys(components).forEach((key) => {var name = key.replace(/(\w)/, (v) => v.toUpperCase()) //首字母大写Vue.component(`v${name}`, components[key])
})
利用require.context遍历目录所有图片
G:\Code\Vue\vue-global-component\src\assets>tree /f
卷 其它 的文件夹 PATH 列表
卷序列号为 1081-0973
G:.
│ logo.png
└─kittenskitten1.jpgkitten2.jpgkitten3.jpgkitten4.jpg
加载所有的图片
<template><div id="app"><img src="@/assets/logo.png"><li v-for="item in images"><h3>Image: {{ item }}</h3><img :src="imgUrl(item)"></li></div>
</template><script>var imagesContext = require.context('@/assets/kittens/', false, /\.jpg$/);console.log(imagesContext)console.log(imagesContext('./kitten1.jpg'))console.log(imagesContext.keys())export default {created: function() {this.images = imagesContext.keys();},name: 'haha',data() {return {images: [],msg: 'Welcome to Your Vue.js App'}},methods: {imgUrl: function(path) {//console.log('Path:' path);return imagesContext(path)}}}
</script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}h1,h2 {font-weight: normal;}ul {list-style-type: none;padding: 0;}li {display: inline-block;margin: 0 10px;}a {color: #42b983;}
</style>
更多专业前端知识,请上 【猿2048】www.mk2048.com
require.context相关推荐
- redux中reducer使用require.context使用技巧
先使用create-react-app搭建项目 使用webpack的require.context可以获取文件的上下文,然后将reducers文件夹下的reducer根据文件名存到一个数组里,这样一个 ...
- 使用require.context实现前端工程自动化
require.context介绍 require.context是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中 ...
- require.context实现前端工程自动化
如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块. 一.使用require.context的场景 (1 ...
- vue require图片_手把手教你使用require.context实现前端自动化
随便记录一些东西,如有错误欢迎指出 作者:心_c2a2 转发链接:https://www.jianshu.com/p/c894ea00dfec require.context是什么 一个webpack ...
- require.context()的用法详解
require.context(directory,useSubdirectories,regExp) directory:表示检索的目录 useSubdirectories:表示是否检索子文件夹 r ...
- require.context()的用法
一般用于加载某个目录下的多个文件,如: const modulesFiles = require.context("./modules", true, /\.js$/) requi ...
- vue3 require.context 实现基础组件的自动化全局注册 模块自动化加载(霸霸看了都说好)
在日常开发中,有一些组件是比较常用,但是为了避免在开发过程中不停地引入,或者在main.js中注册,,或者每添加一个组件就需要手动注册一次.则直接进行自动化全局注册. 由于全局注册的行为必须在根 Vu ...
- require.context
1.什么是 require.context 一个 webpack 的 api ,通过该函数可以获取一个上下文,从而实现工程自动化(遍历文件夹的文件,从中获取指定文件,自动导入模块). 在前端工程中,如 ...
- Vue中两个让你幸福感爆棚的组件导入小技巧之require.context
前言 小伙伴们大家好,在上一篇文章Vue中两个让你幸福感爆棚的组件导入小技巧之循环代替Ctrl C/V(独家总结)中我们已经学习了一个注册全局组件的小技巧,使得我们在注册大量全局组件时不再被Vue.u ...
最新文章
- SqlServer 2008 R2定时备份数据库,并且发送邮件通知
- 公司技术部门内部的发展变化过程。
- 基于MySQL的高可用可扩展架构探讨
- 开放课程管理系统(Moodle)的介绍(转)
- hbase linux 命令,在linux下操作hbase
- memcache两种客户端比较
- 腾讯再回应被骗,悬赏1000瓶老干妈求线索!老干妈:腾讯从来没有催收过
- 简易OA漫谈之工作流设计(一个Demo),完成6年前的一个贴子
- 一文带你全面了解虚拟机的四种网络模型(图文并茂)
- 2019.11软考软件设计师归来心得体会及复习备考指南
- Linux下使用USB转串口转换器
- android 电池测试 apk,安卓手机电池检测工具
- 【网络】Select服务器的实现
- 线代9讲 第八讲 相似理论
- 公司测试用例评审的简单介绍
- 保融笔试题目及其答案解析
- 如何使用SX1278的中断控制发送和接收
- 淘宝店铺动销率对店铺有什么影响,怎样提高店铺动销率
- oracle 字符集问题处理,oracle 字符集问题解决
- 加拿大旅游签证申请的行程单参考
热门文章
- oracle java 并发_【转】JAVA并发教程(ORACLE官网资料)
- OSI模型和TCP/IP协议族
- Codeforces - 102222C - Caesar Cipher
- 隐藏响应的server,X-Powered-By
- Codeforces 999F Cards and Joy 【dp】【性质】
- BZOJ4562: [Haoi2016]食物链
- enmo_day_06
- asp.net服务器端跳转页面的三种方法
- VS2010 自动化整理代码(1)--- VS正则表达替换 PK Vim
- 复旦大学长跑协会财务制度(初稿)