require.context

требуется заявление с выражением

  Если вам требуется параметры содержат выражения (выражения), он создает контекст (контекст), потому что во время компиляции (время компиляции) не ясно, какой конкретный модуль импортируется

требуют ( " ./template/ " + имя + " .ejs " );

  WebPack решительность требуют () вызова, извлеченный следующую информацию:

Каталог: ./ шаблон 
Регулярное выражение: /^.*\.ejs$/

  Это будет возвращать все суффиксы в каталоге шаблонов для ссылки на модуль .ejs, включают в себя подкаталоги.

require.context

Вы можете использовать require.context () метод, чтобы создать свой собственный (модуль) контекст, этот метод имеет три параметра:

• Для поиска каталога папки файла
• Должна ли она также поиск подкаталогов,
• А файл сопоставление регулярного выражения.

  require.context (Каталог, useSubdirectories = ложь ., РегВыр = / ^ \ \ // ) 
 

  require.context ( " ./test " , ложь , /\.test\.js$/ );
   // (создает) а Он содержит тестовую папку (не включая подкаталоги) ниже, контекст всех файлов , оканчивающиеся на `.test.js`, и может потребовать запрос к файлу. 
 

  require.context ( " ../ " , истина , /\.stories\.js$/ );
   // (создает) , который содержит основную папку (включая подкаталоги) ниже, все имена файлов в `.stories .js` контекст конца файла.

require.context модуль экспорта (возвраты) функция (требуется) , эта функция принимает один параметр: функция запроса - запрос относится здесь должны требовать выражение о ()

Есть три способа экспорта атрибутов: решить, ключи, идентификатор.

• Решимость это функция, которая возвращает модуль запроса идентификатор, полученный разрешен.
• Клавиши это функция, которая возвращает массив все запроса контекста может быть обработано с помощью компонентов модуля.
• идентификатор контекста модуль, который содержит идентификатор модуля. Он может быть использован при использовании module.hot.accept

Vue глобальные компоненты:

= Module.exports.install функция (Vue) {
  / * 
   все компоненты в ./components .vue автоматически регистрируется в глобальной сборке каталогов 
   в <мв - ***> </ мв - ***> это сборка имя тега, *** .name сборка, когда имя не является компонентом имени файла 
  * / 

 Const requireAll контекст => context.keys () Карта (контекст) ;. 

 Const компонент = require.context ( ' ./components ' , ложный , /\.vue$/ );
  // Const = require.context Директивы (»./ директив, к ложному, /\.js$/); 

 requireAll (компонент) .forEach ((п) => {
    сопзЬ имени = (. item.name, при || / (\ S + \ /) (\ S +) \ ВУЭ / .exec (item.hotID) [ 2 ] . ) toLowerCase (); 
   Vue.component ( `Музыкальные видео- $ {имя} `, пункт); 
 }); 

};

/ * * 
* Файл позволяет `@ / магазин / index.js` импортировать все vuex модули 
* в одноразовом порядке. Там не должно быть никаких оснований для редактирования этого файла. 
* / 

Константные файлы = require.context ( ' ./modules ' , ложь , /\.js$/ ) 
console.log ( ' ------------ ' ) 
console.log (files.keys ()) 
console.log ( ' ------------ ' )
 константные модулей = {} 

files.keys (). Foreach (ключ => { 
   модули [key.replace ( / (\. \ /|\.js)/g, '' )] = файлы (ключ).по умолчанию 
}) 

console.log ( ' ------------ ' ) 
console.log (модули) 
console.log ( ' ------------ ' ) 
экспорта по умолчанию модули

 

 

Для того, чтобы ввести SVG файл SVG все из следующих действий: Создайте новый файл JS index.js написать следующий код (иконки) директории файла:

пусть requireAll = requireContext => requireContext.keys (). карта (requireContext) 
пусть REQ = require.context ( ' ./svg ' , ложь , /\.svg$/ ) 
requireAll (REQ)

Vue глобальные компоненты

Const requireAll контекст => context.keys () Карта (контекст) ;. 

Const Компонент = require.context ( ' ./components ' , к ложному , /\.vue$/);    // лжи не траверс подкаталогов, верно обход подкаталог 


requireAll (компонент) .forEach (({ по умолчанию : пункт}) => { 
    console.log (Item) 
    Vue.component (WB ` - $ {}` item.name, для, п); 
});

Капитализированное

Object.keys (компоненты) .forEach ((ключ) => {
     вар имя = key.replace (/ (\ ш) / (v) => v.toUpperCase ()) // 首字母大写
    Vue.component ( ` v $ {имя} `, компоненты [ключ]) 
})

Require.context использование обходных фотографий

G: \ Code \ Vue \ vue- Global компонентная \ СРК \ Assets> Дерево / F 
объем других папок список PATH 
серийный номер тома 1 081 - 0973 
G:. 
│ logo.png 
└─kittens 
        kitten1.jpg 
        kitten2.jpg 
        kitten3.jpg 
        kitten4.jpg

 

<шаблон> 
    <DIV ID = " приложение " > 
        <IMG SRC = " @ / активы / logo.png " > 
        <литий v- для = " пункт в изображениях " > 
            <h3> Изображение: {{пункт}} </ h3 > 
            <IMG: SRC = " imgUrl (пункт) " > 
        </ li> 
    </ DIV> 
</ шаблон> 

<скрипт> вар imagesContext = require.context ( ' @ / активы / котята / ' , ложь , /\.jpg $ / ); '
    
    console.log (imagesContext)
    console.log (imagesContext (./kitten1.jpg ' )) 
    console.log (imagesContext.keys ()) 
    экспорта по умолчанию { 
        создано: функция () { 
            это .images = imagesContext.keys (); 
        }, 
        Имя: ' ха - ха ' , 
        данные () { 
            возвращение { 
                изображения: [], 
                сообщ: ' Добро пожаловать в Вашу Vue.js App ' 
            } 
        }, 
        методы: { 
            imgUrl: функция (путь) { 
                // console.log (» путь:»+ путь); 
                вернутьсяimagesContext (путь)
            } 
        } 
    }
 </ SCRIPT> 

<стиль> 
    #app { 
        шрифт -семейством: ' Авенир ' , Helvetica, Arial, sans- засечек;
        -webkit-Font- Сглаживание: сглаженный;
        -moz-OSX-Font- Сглаживание: черно - белый; 
        текст - выровняйте: центр; 
        цвет: # 2c3e50; 
        Маржа - топ: 60px; 
    } 
    
    H1, 
    h2 { 
        шрифта - Вес: нормальный; 
    } 
    
    Ул { 
        список -style-нет типа: нет; 
        обивка: 0 ; 
    } 
    
    Li { 
        дисплей: встроенный - блок; 
        Запас: 0 10px; 
    } 
    
    А { 
        цвет: # 42b983; 
    }
 </ Стиль>

 

---

импорт Вьет из  ' ви ' 

 

функции capitalizeFirstLetter ( строка ) { 

  возвращение  строки .charAt ( 0 ) .toUpperCase () + строка .slice ( 1 ) 

} 

 

Const requireComponent = require.context ( 

  ' ' , ложно , /\.vue$/ // 找到компоненты文件夹下以.vue命名的文件
) 
requireComponent.keys (). Foreach (имя_файла => { Const componentConfig = requireComponent (имя_файла) Const ComponentName = capitalizeFirstLetter (

   


 


  

 

  

    fileName.replace ( / ^ \ \. // '.Надеть (/ \ \ W + $ /,.'), ')' 

    // Поскольку результирующий формат файла является: './baseButton.vue', так что здесь мы удалили голова и хвост, оставив только фактическое имя файла 

  ) 

 

  Vue.component (ComponentName, componentConfig. умолчанию || componentConfig) 

})

Вьет Импорт из  ' VUE ' 
Выпускаемых контекстов = require.context ( ' ' , к ложному , /\.vue$/ ) 
contexts.keys (). Foreach (Component => { 
  ЛПЭ componentEntity = контексты (компонент). По умолчанию // использование встроенные имена компонентов зарегистрированы глобальные компоненты   Vue.component (componentEntity.name, componentEntity) 
})