前端工程化之動態導入文件

前言

隨着項目愈來愈大，業務須要愈來愈多，咱們項目的目錄層級也是很是的多。若是仍是經過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$/)); 
});複製代碼