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

Posted 2023-02-22

【中文标题】Javascript / webpack：如何将目录中的所有json文件与文件的自定义循环连接起来

【英文标题】：Javascript / webpack : how to concatenate all json files in directory with a custom loop over files

【发布时间】：2016-09-01 13:18:07

【问题描述】：

我正在用 webpack 构建一个 reactJs 包。 我目前正在尝试将 json 文件连接到一个对象中以与 i18next 一起使用。我觉得它很简单，我不想使用过于复杂的解决方案。

我有一个像

这样的目录结构

消息/locale_name/domain_name.json

如何在我的代码中导入常规对象中的所有 json 文件？

到目前为止，我从一开始就在苦苦挣扎，因为我发现了需要 require('fs") 的建议，但是 webpack 告诉我它无法解析 fs 模块，我已经看到我无法安装它是默认节点配置的一部分。

感谢您的帮助。

谢谢！

【问题讨论】：

我的回答并没有完全回答这个问题——如果您希望动态检测哪些 i18n 文件可用，您似乎想要创建另一个列出 JSON 文件的 JSON 文件.这在脚本或自定义 WebPack 插件中很容易做到。可能已经有一个 WebPack 插件来执行此操作，例如 webpack-shell-plugin

好吧，这个 json-loader 并没有真正的帮助，因为我想自定义在循环中创建对象的方式。我的东西看起来很标准，我知道如何在 php 中做到这一点，但我被 npm 和 webpack 困在这里，因为我找不到让 require('fs') 解决的方法。还是谢谢

fs 将在 webpack 插件中可用，因为 webpack 在 Node 上运行，但 fs 在浏览器中运行的 web 应用程序上不可用。您可以编写 JS 来从 Web 中提取 JSON 文件并以这种方式解析它们。就 json-loader 而言，它为你提供了一个 javascript 对象，你可以用它做任何你想做的事情。您将如何“自定义对象的创建方式”？听起来你只会规范化 JSON？

嗯，确实，我知道我不能在客户端 js 中使用 fs。但是我不能遍历目录的文件并使其可用于 webpack 吗？这个想法是我想连接我所有的语言文件，我更愿意将它包含在包中而不是进行另一个 xhr 调用

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

【参考方案1】：

经过很多的折腾，其实很简单。下面是我最终得到的。关键是正确设置 JSON 加载器。

为 Webpack 安装 JSON Loader

npm install --save-dev json-loader

将 JSON 加载器添加到您的 Webpack 加载器

这是使用context 拉取文件所必需的。 将此添加到您的 webpack.config.js 加载器 test: /\.json$/, loader: 'json' , 决赛可能是这样的：

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

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

在我的 app.js 中：

function requireAll( requireContext ) 
  return requireContext.keys().map( requireContext );

var modules = requireAll( require.context("./modules", false, /.json$/) );

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

【讨论】：

抱歉，对 webpack 有点陌生，我想知道我是否正确理解了您的 requireAll() 函数。所以你使用requireContext作为映射函数来映射requireContext的key，结果是在构建还是运行时构建的？

【参考方案2】：

最好使用 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 导入，您也可以使用它

【参考方案3】：

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

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

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

您可以使用以下模式将所有 json 连接到一个 json 文件中，如下所示

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

免责声明：我为这个插件做出了贡献

【讨论】：

请在您的答案中添加一些相关信息。不鼓励仅链接答案。

【参考方案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 文件中。要要求目标合并文件，您只需要要求一个其源文件并加载它。