require.context实现前端工程自动化

如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块。

一、使用require.context的场景

（1）需要导入一个文件夹下面的所有文件

（2）路由中导入各个组件文件

如果项目变大了之后,每次手动import会显得有些力不从心,这里可以使用require.context函数遍历modules文件夹的所有文件一次性导入到index.js中

二、require.context分析

语法: require.context(directory, useSubdirectories = false, regExp = /^.//);

require.context函数接受三个参数

directory {String} -读取文件的路径

useSubdirectories {Boolean} -是否遍历文件的子目录

regExp {RegExp} -匹配文件的正则

三、实例说明

如上图所示，将mock文件夹下面的 mock1 和 mock2组件导入

text_require.vue

<template><div><!-- 全部加入 --><component v-for="comp in comps" :key="comp.id" :is="allComps[comp]"></component><!-- 单个加入 --><component :is="allComps['mock1']"> </component></div>
</template>
<script>
import resultComps from '../components/mock/index';// 同理可以动态引入 图片
export default {name: 'TextEP',data () {return {comps: ['mock1', 'mock2'],allComps: resultComps}}
}
</script><style lang="less" scoped>
img {width: 100%;
}
</style>

mock1.vue

<template><div class="test-Prolo"><div>马优晨测试试试~~~~</div><div class="test-border"></div></div>
</template><script>
export default {data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><style lang="less" scoped>
.test-Prolo {background: #2c3e50;
}.test-border {height: 0.5rem;position: relative;
}.test-border:before {content: "";position: absolute;top: -0.5rem;left: 0;width: 100%;height: 1px;border-top: 1px solid rgba(255, 255, 255, 0.3);transform: scaleY(0.5);
}
</style>

mock2.vue

<template><div class="test-Prolo"><div>马优晨测试试试~~~~</div><div class="test-border"></div></div>
</template><script>
export default {data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><style lang="less" scoped>
.test-Prolo {background: #2c3e50;
}.test-border {height: 0.5rem;position: relative;
}.test-border:before {content: "";position: absolute;top: -0.5rem;left: 0;width: 100%;height: 1px;border-top: 1px solid rgba(255, 255, 255, 0.3);transform: scaleY(0.5);
}
</style>

index.js

const resultComps = {}
let requireComponent = require.context('./', // 在当前目录下查找false, // 不遍历子文件夹/\.vue$/ // 正则匹配 以 .vue结尾的文件
)
requireComponent.keys().forEach(fileName => {let comp = requireComponent(fileName)resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})
export default resultComps

require.context实现前端工程自动化相关推荐

使用require.context实现前端工程自动化
require.context介绍 require.context是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中 ...
vue require图片_手把手教你使用require.context实现前端自动化
随便记录一些东西,如有错误欢迎指出作者:心_c2a2 转发链接:https://www.jianshu.com/p/c894ea00dfec require.context是什么一个webpack ...
（bower、grunt、gulp、jspm、karmam、webpack）前端工程自动化开发工具
gulp 是工具链,可以配合各种插件做js压缩,css压缩,less编译等工作 webpack 是文件打包工具,可以把项目的各种js文.css文件等打包合并成一个或多个文件 bower 是包管理器,用 ...
vue3 require.context 实现基础组件的自动化全局注册模块自动化加载（霸霸看了都说好）
在日常开发中,有一些组件是比较常用,但是为了避免在开发过程中不停地引入,或者在main.js中注册,,或者每添加一个组件就需要手动注册一次.则直接进行自动化全局注册. 由于全局注册的行为必须在根 Vu ...
require.context
1.什么是 require.context 一个 webpack 的 api ,通过该函数可以获取一个上下文,从而实现工程自动化(遍历文件夹的文件,从中获取指定文件,自动导入模块). 在前端工程中,如 ...
Vue中两个让你幸福感爆棚的组件导入小技巧之require.context
前言小伙伴们大家好,在上一篇文章Vue中两个让你幸福感爆棚的组件导入小技巧之循环代替Ctrl C/V(独家总结)中我们已经学习了一个注册全局组件的小技巧,使得我们在注册大量全局组件时不再被Vue.u ...
基于webpack搭建前端工程解决方案探索
关于前端工程 \\ 下面是百科关于"软件工程"的名词解释: \\ \ 软件工程是一门研究用工程化方法构建和维护有效的.实用的和高质量的软件的学科. \ \\ 其中,工程化是方法,是 ...
Gulp vs Grunt 前端工程构建工具
Gulp vs Grunt 前端工程的构建工具对比 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Jav ...
前端工程基础知识点--Browserslist (基于官方文档翻译）
总结不出更好的了,感觉官方文档已经写得够清楚了,翻译的不好,请大家斧正简介 browserslist 是在不同的前端工具之间共用目标浏览器和 node 版本的配置工具.它主要被以下工具使用: Aut ...

require.context实现前端工程自动化

一、使用require.context的场景

二、require.context分析

三、实例说明

require.context实现前端工程自动化相关推荐

最新文章

热门文章