带表达式的 require 语句

如果你的 require参数含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块被导入

require("./template/" + name + ".ejs");

webpack 解析 require() 的调用,提取出来如下这些信息:

Directory: ./template
Regular expression: /^.*\.ejs$/
 

则会返回template目录下的所有后缀为.ejs模块的引用,包含子目录。

require.context

可以使用 require.context() 方法来创建自己的(模块)上下文,这个方法有 3 个参数:

  • 要搜索的文件夹目录
  • 是否还应该搜索它的子目录,
  • 以及一个匹配文件的正则表达式。
  require.context(directory, useSubdirectories = false, regExp = /^\.\//)

  require.context("./test", false, /\.test\.js$/);
//(创建了)一个包含了 test 文件夹(不包含子目录)下面的、所有文件名以 `.test.js` 结尾的、能被 require 请求到的文件的上下文。 require.context("../", true, /\.stories\.js$/);
//(创建了)一个包含了父级文件夹(包含子目录)下面,所有文件名以 `.stories.js` 结尾的文件的上下文。
 

require.context模块导出(返回)一个(require)函数,这个函数可以接收一个参数:request 函数–这里的 request 应该是指在 require() 语句中的表达式

导出的方法有 3 个属性: resolve, keys, id。

  • resolve 是一个函数,它返回请求被解析后得到的模块 id。
  • keys 也是一个函数,它返回一个数组,由所有可能被上下文模块处理的请求组成。
  • id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

Vue 全局组件:

module.exports.install = function (Vue) {
/*
所有在./components目录下的.vue组件自动注册为全局组件
以<mv-***></mv-***>为组件标签名,***是组件的.name,没有name的时候是组件的文件名
*/ const requireAll = context => context.keys().map(context); const component = require.context('./components', false, /\.vue$/);
// const directive = require.context('./directives', false, /\.js$/); requireAll(component).forEach((item) => {
const name = (item.name || /(\S+\/)(\S+)\.vue/.exec(item.hotID)[]).toLowerCase();
Vue.component(`mv-${name}`, item);
}); };
/**
* The file enables `@/store/index.js` to import all vuex modules
* in a one-shot manner. There should not be any reason to edit this file.
*/ const files = require.context('./modules', false, /\.js$/)
console.log('------------')
console.log(files.keys())
console.log('------------')
const modules = {} files.keys().forEach(key => {
modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
}) console.log('------------')
console.log(modules)
console.log('------------')
export default modules

要引入svg下面所有的svg文件: 在该文件(icons)目录下新建一个js文件index.js 写如下代码:

let requireAll = requireContext => requireContext.keys().map(requireContext)
let req = require.context('./svg', false, /\.svg$/)
requireAll(req)

Vue 全局组件

const requireAll = context => context.keys().map(context);

const component = require.context('./components', false, /\.vue$/);   // false 不遍历子目录,true遍历子目录

requireAll(component).forEach(({default:item}) => {
console.log(item)
Vue.component(`wb-${item.name}`, item);
});
 

首字母大写

Object.keys(components).forEach((key) => {
var name = key.replace(/(\w)/, (v) => v.toUpperCase()) //首字母大写
Vue.component(`v${name}`, components[key])
})
 

利用require.context遍历目录所有图片

G:\Code\Vue\vue-global-component\src\assets>tree /f
卷 其它 的文件夹 PATH 列表
卷序列号为 -
G:.
│ logo.png
└─kittens
kitten1.jpg
kitten2.jpg
kitten3.jpg
kitten4.jpg
<template>
<div id="app">
<img src="@/assets/logo.png">
<li v-for="item in images">
<h3>Image: {{ item }}</h3>
<img :src="imgUrl(item)">
</li>
</div>
</template> <script>
var imagesContext = require.context('@/assets/kittens/', false, /\.jpg$/);
console.log(imagesContext)
console.log(imagesContext('./kitten1.jpg'))
console.log(imagesContext.keys())
export default {
created: function() {
this.images = imagesContext.keys();
},
name: 'haha',
data() {
return {
images: [],
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
imgUrl: function(path) {
//console.log('Path:' + path);
return imagesContext(path)
}
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} h1,
h2 {
font-weight: normal;
} ul {
list-style-type: none;
padding: ;
} li {
display: inline-block;
margin: 10px;
} a {
color: #42b983;
}
</style>
 

import Vue from 'vue'

function capitalizeFirstLetter(string) {

  return string.charAt().toUpperCase() + string.slice()

}

const requireComponent = require.context(

  '.', false, /\.vue$/

   //找到components文件夹下以.vue命名的文件

)

requireComponent.keys().forEach(fileName => {

  const componentConfig = requireComponent(fileName)

  const componentName = capitalizeFirstLetter(

    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')

    //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾,只保留真正的文件名

  )

  Vue.component(componentName, componentConfig.default || componentConfig)

})
 
import Vue from 'vue'
let contexts = require.context('.', false, /\.vue$/)
contexts.keys().forEach(component => {
let componentEntity = contexts(component).default
// 使用内置的组件名称 进行全局组件注册
Vue.component(componentEntity.name, componentEntity)
})

require.context的更多相关文章

  1. [Vue]webpack的require与require.context

    1.require 1.1完整路径的require语句: require('tools'); //preset alias tools require('./js/main'); 1.2带表达式的 r ...

  2. dva webpack 利用require.context加载多个model

    dva redux数据管理都在models,根据业务不同models可能会有几十甚至上百的 [模块.js], 每次在index.js使用 app.model(require('./models/exa ...

  3. vue 动态添加路由 require.context()

    之前的写法 'use strict' import Vue from 'vue' import MessageBroadcast from 'page/MessageBroadcast' import ...

  4. 一张图带你了解webpack的require.context

    很多人应该像我一样,对于webpack的require.context都是一知半解吧.网上很多关于require.context的使用案例,但是我没找到可以帮助我理解这个知识点的,于是也决定自己来探索 ...

  5. vue 优化小技巧 之 require.context()

    1.require.context() 回忆一下 当我们引入组件时 第一步 创建一个子组件 第二步 import ... form ... 第三步 components:{..} 第四步 页面使用 & ...

  6. require.context批量引入文件

    require.context 是什么 require.context 是由webpack内部实现,require.context在构建时,webpack 在代码中进行解析. 当需要引入文件夹内多个文 ...

  7. webpack的带表达式require和require.context()方法

    带表达式的 require 语句如果 require参数含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块被导入 ...

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

    require.context是什么 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多 ...

  9. vue路由分区结合require.context使用

    1.先说路由分区 在router文件夹下新建你要分区的模块例如 登录  订单模块 新建文件 logn.router.js  order.router.js 代码如下: export default { ...

  10. 关于webpack require.context() 的那点事

    先说 webpack里面有这么一招:使用require.context()方法来自动导入模块 官方文档有点深奥,老衲百度下拿了一段来直接使用,但是想看下它是如何运行的 本篇这里不会有太深入的研究,只是 ...

随机推荐

  1. js gridview中checkbox的全选与全不选

    1.html: <asp:GridView runat="server" ID="gvAddBySR" AutoGenerateColumns=" ...

  2. Where is __dso_handle defined?

    Where is __dso_handle defined? 来源  https://stackoverflow.com/questions/34308720/where-is-dso-handle- ...

  3. JS基础_对象的简介、对象的基本操作

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. O034、 Nova Pause / Resume Instance 操作详解

    参考https://www.cnblogs.com/CloudMan6/p/5496825.html   本节通过日志详细分析 Nova Pause / Resume 操作.   有时需要短时间暂停  ...

  5. spark内存管理详解

    Spark 作为一个基于内存的分布式计算引擎,其内存管理模块在整个系统中扮演着非常重要的角色.理解 Spark 内存管理的基本原理,有助于更好地开发 Spark 应用程序和进行性能调优.本文旨在梳理出 ...

  6. SQL中 left join 的底层原理

    介绍 left join的实现效果就是保留左表的全部信息,将右表往左表上拼接,如果拼不上则为NULL. 除了left join以外,还有inner join.outer join.right join ...

  7. vue入门:(条件渲染)

    v-if v-show v-else 一.v-if:生成或者移出一个元素 <div id="example"> <button v-on:click=" ...

  8. 【Git的基本操作六】分支管理

    分支管理 1. 什么是分支? 在版本控制过程中,使用对条线同时推进多个任务. 2. 分支的好处 同时并行推进多个功能开发,提高开发效率 各个分支在开发过程中,如果某一个分支开发失败,不会对其他分支有任 ...

  9. SSH安装配置

    一.环境准备 二.SSH配置 1.root用户进入home目录,确实有无隐藏文件夹 .ssh cd ~ ls -lrta 2.有,则跳过本步骤:没有,执行如下命令 ##根据提示输入当前用户密码 ssh ...

  10. thinkphp5.0 field和with连用的问题

    field在with后面时field会不起作用,会查询数据库中全部的字段: field在with前面时会无法筛选联表的字段 解决办法把with换成join,field和join顺序无所谓 * @par ...