Javascript / webpack：如何使用自定义循环将目录中的所有JSON文件连接起来？

Question

我正在使用webpack构建ReactJs包。目前，我正尝试将JSON文件连接成一个对象并用于i18next。这很简单，我不想使用过于复杂的解决方案。

我的目录结构如下：

messages/locale_name/domain_name.json 如何将所有JSON文件导入到我的代码中作为一个正常的对象？ 到目前为止，我遇到了一些问题，因为我找到的建议需要使用require('fs')，但是webpack告诉我它无法解析fs模块，我发现我不能安装它，因为它是默认节点配置的一部分。

需要一些帮助。

谢谢！

- Sébastien

---

我的答案并没有完全回答这个问题——如果你想动态检测可用的i18n文件，似乎你需要创建另一个JSON文件来列出这些JSON文件。这在脚本或自定义WebPack插件中非常容易实现。可能已经有一个WebPack插件可以做到这一点，比如webpack-shell-plugin。 - mejdev

好的，这个json-loader并没有真正帮到我，因为我想自定义在循环中创建对象的方式。我的东西似乎相当标准，如果是在php中，我会知道如何做，但是我现在被npm和webpack卡住了，因为我找不到让require('fs')工作的方法。无论如何还是谢谢。 - Sébastien

fs 会在 webpack 插件中可用，因为 webpack 运行在 Node 上，但是在运行在浏览器中的 Web 应用程序上，fs 是不可用的。您可以编写 JS 从 Web 中获取 JSON 文件并解析它们。至于 json-loader，它会给您一个 JavaScript 对象，您可以对其进行任何操作。您如何“自定义对象创建的方式”？听起来像是您只需规范化 JSON 即可。 - mejdev

好的，确实，我明白在客户端JS中不能使用fs。但是我能否循环遍历目录中的文件并使其对webpack可用？我的想法是将所有语言文件连接起来，我更喜欢将其包含在捆绑包中，而不是进行另一个XHR调用。 - Sébastien

好的，我建议您重新阅读我的第一条评论，然后研究一下webpack-shell-plugin。我相信它可以满足您的需求。 - mejdev

当我遇到 fs 错误时，通常是因为我的路径错误或者使用了错误的加载器...类似这样的问题。最终总是发现我有些地方不正确，而错误信息又过于模糊，使得很难找出问题所在... - Jake

Answer 1

经过一番折腾，实际上很容易。以下是我最终得到的结果。关键在于正确设置JSON Loader。

安装Webpack的JSON Loader

1. npm install --save-dev json-loader

将JSON Loader添加到Webpack加载器中

1. 这是使用context提取文件所必需的。
2. 将以下内容添加到webpack.config.js加载器中 { test: /\.json$/, loader: 'json' },
3. 最终结果可能类似于：

module.exports = {
  entry: './src/app.js',
  output: { path: __dirname, filename: './build/bundle.js' },
  module: {
    loaders: [
      { test: /\.json$/, loader: 'json' }
    ]
  }
}

使用上下文加载文件并将它们保存到数组中

在我的app.js文件中:

function requireAll( requireContext ) {
  return requireContext.keys().map( requireContext );
}
var modules = requireAll( require.context("./modules", false, /.json$/) );

1. “modules”是我的app.js的一个子目录（在我这里是./src/modules）。
2. 所有的JSON文件都将被加载到一个数组中[Object, Object, Object]，我将它们存储在var modules中。

- Jake

---

抱歉，我对webpack还不太熟悉，想请教一下requireAll()函数的理解是否正确。您是使用requireContext作为映射函数来映射requireContext的键，那么结果是在构建时还是运行时生成的呢？ - Alex Hope O'Connor

Answer 2

@Sébastien 请查看这个插件 https://www.npmjs.com/package/merge-jsons-webpack-plugin

您可以将文件/模式数组作为输入传递，它将发出单个json文件。

例如，如果您有许多json文件在目录/node_modules/module-a和/node_modules/module-b中

您可以使用以下模式将所有json连接成一个单独的json文件，如下所示

new MergeJsonWebpackPlugin({ "files": ['./jsons/file1.json', './jsons/file3.json', './jsons/file2.json'], "output":{ "fileName":"./dist/result.json" } })

免责声明：我对此插件做出了贡献

- sudharsan tk

---

请在您的回答中添加一些相关信息。不鼓励仅附链接的答案。 - Alexei - check Codidact

Answer 3

最好使用类似 json-loader 的工具来完成此操作。

安装它（npm install json-loader --save-dev）后，您可以按照项目自述文件中的说明进行导入：

var json = require("json!./messages/locale_name/domain_name.json");

或者您可以在webpack.config.js中添加一个加载器，然后正常导入json：

webpack.config.js:

module: { 
    loaders: [
        {test: /\.json$/, loader: 'json-loader'},
    ]
},

在你的源代码中：

var json = require("./messages/locale_name/domain_name.json");

当然，如果你的项目使用ES6导入，你也可以使用它

- mejdev

Answer 4

要合并JSON文件，请使用merge-webpack-plugin（还可以按文件名分组，例如）

示例配置：

MergePlugin = require("merge-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.(json)$/i, use: [ MergePlugin.loader() ],
        // also yaml by preloader there too 
        test: /\.(yaml)$/i, use: [ MergePlugin.loader(), 'yaml-loader' ],
      }
    ]
  },
  plugins: [
    new MergePlugin({
      search: './src/**/*.json',
      group: '[name]',
    })
  ]
}

在这个例子中，文件将按文件名分成组。每个组将被加载、合并并保存到目标JSON文件中。要求目标合并文件，您只需要要求其中一个源文件并加载它即可。

- fl-web