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

require.context介绍

require.context是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

require.context使用场景：

在Vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入(原谅ide的警告-.-),但是如果项目变大了之后,每次手动import会显得有些力不从心,这里可以使用require.context函数遍历modules文件夹的所有文件一次性导入到index.js中

require.context介绍

require.context函数接受三个参数

directory {String} -读取文件的路径
useSubdirectories {Boolean} -是否遍历文件的子目录
regExp {RegExp} -匹配文件的正则

require.context实例演示

main.js代码：

const path = require('path')
const requireComponent = require.context('@/views/components', false, /\.vue$/)
//此处配置 webpack的简洁路径@为src，所以路径为src//views/components
requireComponent.keys().reverse().forEach(filename => {const componentConfig = requireComponent(filename)const componentName = path.basename(filename, '.vue')// 全局注册组件Vue.component(componentName,// 如果这个组件选项是通过 `export default` 导出的，// 那么就会优先使用 `.default`，// 否则回退到使用模块的根。componentConfig.default || componentConfig)})

简洁路径配置：

普通webpack(webpack.config.base.js)

  resolve: {modules: ['node_modules'],extensions: ['.css', '.less', '.scss', '.js', '.vue', '.json'],alias: {'~': process.cwd(),'@': path.join(process.cwd(), 'src'),vue: 'vue/dist/vue.common.js',buildPath: buildPath,},},

vue-cli3配置的（vue.config.js）

  configureWebpack: {resolve: {alias: {'@': resolve('src'),'~': process.cwd()}}},

在项目中使用

代码：

  <divv-for="(n, index) in 9":key="`phone_${index}`":class="`page${index}`"class="page"><component:is="`Page${index}`":current="currentPage":baigei="baigeiData"></component></div>

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

require.context实现前端工程自动化
如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块. 一.使用require.context的场景 (1 ...
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介绍

require.context实例演示

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

最新文章

热门文章