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

如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块。

一、使用require.context的场景

（1）需要导入一个文件夹下面的所有文件

（2）路由中导入各个组件文件

如果项目变大了之后,每次手动import会显得有些力不从心,这里可以使用require.context函数遍历modules文件夹的所有文件一次性导入到index.js中

---

二、require.context分析

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

require.context函数接受三个参数

directory {String} -读取文件的路径

useSubdirectories {Boolean} -是否遍历文件的子目录

regExp {RegExp} -匹配文件的正则

---

三、实例说明

如上图所示，将mock文件夹下面的 mock1 和 mock2组件导入

text_require.vue

<template>
  <div>
    <!-- 全部加入 -->
    <component v-for="comp in comps" :key="comp.id" :is="allComps[comp]">
    </component>
    <!-- 单个加入 -->
    <component :is="allComps['mock1']"> </component>
  </div>
</template>
<script>
import resultComps from '../components/mock/index';

// 同理可以动态引入 图片
export default {
  name: 'TextEP',
  data () {
    return {
      comps: ['mock1', 'mock2'],
      allComps: resultComps
    }
  }
}
</script>

<style lang="less" scoped>
img {
  width: 100%;
}
</style>

mock1.vue

<template>
  <div class="test-Prolo">
    <div>马优晨测试试试~~~~</div>
    <div class="test-border"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="less" scoped>
.test-Prolo {
  background: #2c3e50;
}

.test-border {
  height: 0.5rem;
  position: relative;
}

.test-border:before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  transform: scaleY(0.5);
}
</style>

mock2.vue

<template>
  <div class="test-Prolo">
    <div>马优晨测试试试~~~~</div>
    <div class="test-border"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="less" scoped>
.test-Prolo {
  background: #2c3e50;
}

.test-border {
  height: 0.5rem;
  position: relative;
}

.test-border:before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  transform: scaleY(0.5);
}
</style>

index.js

const resultComps = {}
let requireComponent = require.context(
  './', // 在当前目录下查找
  false, // 不遍历子文件夹
  /\.vue$/ // 正则匹配 以 .vue结尾的文件
)
requireComponent.keys().forEach(fileName => {
  let comp = requireComponent(fileName)
  resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})
export default resultComps