As the project is growing, more and more business needs, our project directory hierarchy is also very much. If the file is introduced by import respectively, it is very unscientific.

For example vue vuex project file is very large:

import Vue from 'vue'; 
import Vuex from 'vuex'; 
 
Vue.use(Vuex); 
 
import user from './stores/user'; 
import info from './stores/info'; 
... // 此处省略N多文件 
 
export default new Vuex.Store({ 
 modules: { 
 user, 
 info, 
 ... 
 }, 
});

If there are several files, okay. Dozens, hundreds, very headache. How to solve this problem?

We will use the Webpack in require.context () method, dynamic loading all JS files in a folder, is not to solve the problem it! Let's look at require.context () how to use.

require.context()

grammar:

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

Examples

// 一个test文件夹下面（不包含子目录），能被require请求到，所有文件名以 `.test.js` 结尾的文件形成的上下文（模块）。 
require.context("./test", false, /.test.js$/); 
 
// 一个父级文件夹下面（包含子目录），所有文件名以 `.stories.js` 结尾的文件形成的上下文（模块）。 
require.context("../", true, /.stories.js$/);

下面看看，我们如何应用到vue项目中？

Vue项目中，使用require.context()

import Vue from 'vue' 
import Vuex from 'vuex' 
import { sync } from 'vuex-router-sync' 
import App from './App' 
import router from './router' 
 
const strict = process.env.NODE_ENV !== 'production' 
 
Vue.config.productionTip = false 
 
const modules = {} 
// 获取stores文件夹下所有js文件 
let requireContext = require.context('./stores', true, /^./.*/index.js$/) 
// requireContext.keys() 返回匹配成功模块的名字组成的数组 
requireContext.keys().forEach((key) =< { 
 // 通过 requireContext(key)导出文件内容 
 const mod = requireContext(key) 
 modules[key.slice(2, -9)] = mod.__esModule && mod.default ? mod.default : mod 
}) 
Vue.use(Vuex) 
 
const store = new Vuex.Store({ 
 modules, 
 strict 
}) 
sync(store, router) 
 
new Vue({ 
 el: '#app', 
 router, 
 store, 
 components: { App }, 
 template: '>App/<' 
})

通过以上方法就可以动态的导入stores文件夹中的所有js文件，这样就方便管理了，也不用一个个引入，同理，如果路由文件等非常多，也可以用require.context()导入。

全局过滤器导入

Vue.use((Vue) =< { 
 ((requireContext) =< { 
 const arr = requireContext.keys().map(requireContext); 
 (arr || []).forEach((filter) =< { 
 filter = filter.__esModule && filter.default ? filter.default : filter; 
 Object.keys(filter).forEach((key) =< { 
 Vue.filter(key, filter[key]); 
 }); 
 }); 
 })(require.context('./filters', false, /^./.*.js$/)); 
});

全局指令导入

Vue.use((Vue) =< { 
 ((requireContext) =< { 
 const arr = requireContext.keys().map(requireContext); 
 (arr || []).forEach((directive) =< { 
 directive = directive.__esModule && directive.default ? directive.default : directive; 
 Object.keys(directive).forEach((key) =< { 
 Vue.directive(key, directive[key]); 
 }); 
 }); 
 })(require.context('./directives', false, /^./.*.js$/)); 
});

总结

webpack作为前端构建的打包工具，把各种资源，例如JS（含JSX）、coffee、css（含less/sass）、图片等都作为模块来处理和使用，它已经做了非常好了，它还有非常多的功能等待我们去发掘，研究。

Webpack require.context () dynamic front-end engineering of the import file

require.context()

Vue项目中，使用require.context()

推荐文章

总结

Guess you like