использование веб-пакета для создания объекта на основе всех файлов JSON в проекте

Question

Мне нужно сгенерировать объект JSON для приложения Vue.js на основе всех файлов .json в определенном каталоге. По сути, мне нужно перебрать каждый файл .json, добавить несколько его свойств к объекту JSON и использовать этот объект JSON в приложении.

Можно ли это сделать через загрузчик веб-пакетов? Или я должен смотреть на это по-другому?

Я создал vue.config.js для добавления своего пользовательского загрузчика:

const path = require('path');

module.exports = {
  chainWebpack: (config) => {
    config.module.rule('json')
      .test(/\.json$/)
      .include
        .add(path.resolve(__dirname, 'public/json'))
        .end()
      .use('json-army-list-loader')
        .loader(path.resolve('webpack/loaders/my-loader.js'))
        .end();
  }
};

А у меня есть базовый my-loader.js

var myObj = {};

module.exports = function (source) {
  try {
    myObj[source.category].push(source.name);
  } catch (e) {
    myObj[source.category] = [source.name];
  }

  return JSON.stringify(myObj);
};

Но я застрял здесь и не уверен:

1. как проверить все это (что приводит ко всем этим другим вопросам)
2. если мой загрузчик даже используется
3. если мой загрузчик генерирует объект, он возвращается правильно
4. как получить доступ к этому объекту в моем приложении Vue

Answer 1

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

let myObj = {}
const files = require.context('./json', true, /\.json$/i);

files.keys().map((key) => {
  const json = files(key)
  Object.keys(json).forEach((k) => {
    myObj[k] = json[k]
  })
})

window.myObj = myObj

Здесь мы используем веб-пакеты require.context(), которые имеют следующие аргументы:

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

Мы можем использовать это для создания. глобальное выражение только для файлов в нашем каталоге json, заканчивающемся .json.

Метод files.keys() дает нам имя файла и вызывает вывод нашего require.context() как функцию, а передача ключа возвращает нам содержимое.

Наконец, мы можем применить Object.keys(...), чтобы зациклить каждую из наших key: value пар в нашем json file и применить его к глобальному myObj, который мы затем можем свисать с окна (yikes ..)