require.context简介

require.context是Webpack中用来管理依赖的一个函数，它的参数如下：

require.context(目录，使用子目录=false，regExp=/^\.\//)

使用方式如下所示：

//创建一个试验文件夹（不包含子目录)的上下文，可以需要其下的所有射流研究…文件

const context=require.context(' ./test '，false，/\ .js$/)

const importAll=context={

//上下文。键()返回找到的射流研究…文件路径

context.keys().forEach(key=context(key))

}

重要信息()

实践—- 自动注册某视频剪辑软件组件

利用某视频剪辑软件开发时，我们常会抽离出一些组件并将其放到成分文件夹，然后在某视频剪辑软件中进行引用，例如：

模板

搜索-输入占位符='搜索/search-输入

动态表格/动态表格

/模板

脚本

从导入搜索输入./components/SearchInput '

从'导入动态./组件/动态'

导出默认值{

名称： '应用，

组件： {

搜索输入，

动态的

}

}

/script

这是一种很好的代码复用方式，但是如果要引入的组件比较多时，一个一个引用会比较头疼，有没有一劳永逸的方法呢？有的，要求。语境可以上场了。为了方便使用，我们可以写一个某视频剪辑软件插件

//插件/组件。射流研究…

导出默认值{

安装(Vue){

const context=require.context('./components '，true，/\ .vue/)

context.keys().forEach(键={

const component=context(key).系统默认值

Vue.component(组件。名称，组件)

})

}

}

//app.js

从“vue”导入某视频剪辑软件

从""导入全局组件。"/插件/组件"

Vue.use(全局组件)

原理很简单，我们拿到组件后，通过Vue。组件进行全局注册。这样注册后，我们可以在某视频剪辑软件中的模板里面直接引入组件了。怎么样，是不是方便多啦？

实践—- 简化状态管理开发

首先上一张状态管理的架构图

从架构图上可以看到，我们开发时，会有动作、动作以及商店三个部分，开发时，我们会将这三个部分进行拆开，会有如下的文件夹结构：

行动

指数

概览。射流研究…

设置

突变

指数

概览。射流研究…

设置

商店

指数

行动文件下的index.js用来引用其他射流研究…文件，例如

//actions/index.js

从""导入概述操作“概述”

从""导入设置操作“/设置”

导出默认值{

.概述行动

.设置操作

}

mu ies文件下的index.js用来引用其他射流研究…文件，例如：

//muations/index.js

从""导入概述“概述”

从""导入设置“/设置”

导出默认值{

概述，

设置

}

商店文件夹下的index.js用来将行为和变化进行载入：

从“vue”导入某视频剪辑软件

从“vuex”导入状态管理

从""导入操作./actions '

从""导入突变./突变'

Vue.use(Vuex)

Vue.config.devtools=__DEV__

！_ _ DEV _ _(Vue。配置。ErrorHandler=function(err，vm) {

vm .$ store。调度(“隐藏页面加载”)

console.error(err.message)

})

导出默认的新Vuex .商店({

行动，

模块：突变，

strict: false

})

这样代码结构很清晰，但是大家是否意识到，每次我们增加一个模块，都需修改行动以及突变下的index.js，很烦有没有？饭桶提交时偶尔还发生冲突，很不爽哇！怎么解决？require.context来帮忙~~

我们现在删除行动以及突变下的index.js文件，然后修改store/index.js:

从“vue”导入某视频剪辑软件

从“vuex”导入状态管理

Vue.use(Vuex)

Vue.config.devtools=__DEV__

！_ _ DEV _ _(Vue。配置。ErrorHandler=function(err，vm) {

vm .$ store。调度(“隐藏页面加载”)

console.error(err.message)

});

//自动引入行动下的射流研究…文件，将文件的各个对象合并为一个大对象

const action context=require。上下文(“./actions '，false，/.*\.js/)

常量动作=动作上下文。按键()。reduce((prev，cur)=({.prev，动作上下文(cur).默认}),{})

//自动引入变化文件下的射流研究…文件，以文件名字作为对象的键

const MutationContext=require。上下文(“./突变，false，/.*\.js/)

const modules=MutationContext。keys().reduce((prev，cur)={

const key=cur . match(/(\ w)\ 1 .js/)[1]

prev[key]=mutationContext(cur).系统默认值

返回上一个

}, {})

导出默认的新Vuex .商店({

行动，

模块，

strict: false

})

这样处理后，我们以后增加一个模块，直接往行动和mu ies下直接加射流研究…文件就好了，大家互不干扰，快乐协作！

总结

以上是我开发中总结的一些小技巧，希望对大家有所帮助：-)