Webpack require.context() 前端工程化之动态导入文件

随着项目愈来愈大，业务须要愈来愈多，咱们项目的目录层级也是很是的多。若是仍是经过import分别引入文件，那是很是的不科学的。

 

好比vue项目vuex文件很是多：

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, 
 ... 
 }, 
});

要是有几个文件，还好。几十个，几百个，就很是头疼了。怎么解决这个问题了？

咱们就要用到 Webpack 中的require.context()方法，动态加载某个文件夹下的全部JS文件，是否是就解决问题了呢！下面看看require.context()如何使用。

require.context()

 

语法：

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

示例

// 一个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$/)); 
});

推荐文章

Vue如何建立自定义指令？

Vue全局指令：如何添加全局指令？（附2个经常使用自定义指令）

Webpack4 教程：入口、输入和ES6模块（第一章）

Webpack4教程：使用loader处理scss,图片以及转换JS（第二章）

 

总结

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