Javascript/webpack:如何用自定义的文件循环连接目录中的所有json文件

Javascript / webpack : how to concatenate all json files in directory with a custom loop over files

本文关键字：文件 json 连接 循环 何用 自定义 Javascript webpack      更新时间：2023-09-26

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

我有一个类似的目录结构

messages/locale_name/domain_name.json

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

到目前为止，我在一开始就很挣扎，因为我发现了需要的建议（"s"），但webpack告诉我它无法解决fs模块，我看到我无法安装它，因为它是默认节点配置的一部分。

感谢您的帮助。

谢谢！

经过一段的摸索，这其实很容易。以下是我的结局。关键是正确设置JSON加载器。

安装Webpack的JSON加载器

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

将JSON加载程序添加到Webpack加载程序

  1. 这是使用上下文拉入文件所必需的
  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中

这最好用json加载器这样的东西来完成

安装了它（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导入，您也可以使用它

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

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

例如，如果目录/nodmodules/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" } })

免责声明：我为这个插件

做出了贡献

要合并json文件，请使用merge-webpack插件（也可以按文件名分组）

配置示例：

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

相关文章：