require.context

require statement with an expression

  If you require parameters contain expressions (expressions), it creates a context (context), because at compile time (compile time) is not clear which specific module is imported

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

  webpack resolve require () call, extracted the following information:

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

  It will return all suffixes in the template directory for reference to the module .ejs, include subdirectories.

require.context

You can use require.context () method to create your own (module) context, this method has three parameters:

• To search for a file folder directory
• Whether it should also search subdirectories,
• And a file matching regular expression.

  require.context (Directory, useSubdirectories = false , regExp = / ^ \ \. // ) 
 

  require.context ( " ./test " , false , /\.test\.js$/ );
   // (creates) a It contains a test folder (not including subdirectories) below, the context of all the files ending in `.test.js`, and can require a request to the file. 
 

  require.context ( " ../ " , to true , /\.stories\.js$/ );
   // (creates) that contains the parent folder (including subdirectories) below, all file names to `.stories .js` the context of the end of the file.

require.context export module (returns) a (require) function , this function takes one parameter: request function - request refers herein should require expression statement ()

There are three ways to export attributes: resolve, keys, id.

• resolve is a function that returns the request id module obtained is resolved.
• keys is a function that returns an array of all the context request may be processed by the module components.
• id is the context module which contains the module id. It can be used when you use the module.hot.accept

Vue global components:

= module.exports.install function (Vue) {
  / * 
   all components at ./components .vue automatically registered in the global directory assembly 
   to <mv - ***> </ mv - ***> is a name tag assembly, *** .name assembly is, when no name is the file name component 
  * / 

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

 const component = require.context ( ' ./components ' , to false , /\.vue$/ );
  // const = require.context Directive ( './ directives', to false, /\.js$/); 

 requireAll (Component) .forEach ((Item) => {
    const name = (. item.name, for || / (\ S + \ /) (\ S +) \ VUE / .exec (item.hotID) [ 2 .]) the toLowerCase (); 
   Vue.component ( `Music Videos-${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

 

 

To introduce svg svg file all of the following: Create a new js file index.js write the following code in the file (icons) directory:

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

Vue global components

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

const Component = require.context ( ' ./components ' , to false , /\.vue$/);    // to false does not traverse the subdirectories, true traversal subdirectory 


requireAll (Component) .forEach (({ default : Item}) => { 
    the console.log (Item) 
    Vue.component (WB ` - $ {}` item.name, for, Item); 
});

Capitalized

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

Require.context use directory traversal photos

G: \ Code \ Vue \ vue- Global -component \ the src \ Assets> Tree / F 
volume other folders list PATH 
Volume Serial Number 1081 - 0973 
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: 0;
    }
    
    li {
        display: inline-block;
        margin: 0 10px;
    }
    
    a {
        color: #42b983;
    }
</style>

 

---

import Vue from 'vue'

 

function capitalizeFirstLetter(string) {

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

}

 

const requireComponent = require.context(

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

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

)

 

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

  const componentConfig = requireComponent(fileName)

 

  const componentName = capitalizeFirstLetter(

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

    // Because the resulting filename format is: './baseButton.vue', so here we removed head and tail, leaving only the actual file name 

  ) 

 

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

})

Vue Import from  ' VUE ' 
the let contexts = require.context ( ' . ' , to false , /\.vue$/ ) 
contexts.keys (). forEach (Component => { 
  the let componentEntity = contexts (Component). default 
  // use built-in component names registered global components 
  Vue.component (componentEntity.name, componentEntity) 
})