Question

我需要基于某个目录中的所有.json文件为Vue.js应用程序生成JSON对象。本质上，我需要遍历每个.json文件，将其一些属性附加到JSON对象，然后在应用程序中使用该JSON对象。

这可以通过webpack加载程序完成吗？还是我应该以另一种方式来做呢？

我创建了一个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);
};

但是我被困在这里并且不确定：

如何测试所有这些（导致所有其他问题）
如果我的装载机正在使用中
如果我的加载器正在生成对象，则可以正确返回
如何在我的Vue应用中访问此对象

Answer 1

您实际上可以利用webpack为您提供的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

在这里，我们利用webpack require.context()，它具有以下参数：

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

我们可以使用它来创建。一个glob表达式，仅用于我们json目录中以.json结尾的文件。

files.keys()方法为我们提供了文件名，并以函数的形式调用require.context()的输出，并传递了密钥，使我们返回了内容。

最后，我们可以应用Object.keys(...)来循环遍历key: value中的每个json file对，并将其应用到全局myObj上，然后我们可以将其挂在窗口之外（喜欢）。

使用webpack基于项目中的所有JSON文件创建对象

1 个答案: