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

Question

I am building a reactJs bundle with webpack. I am currently trying to concatenate json files into an object to use with i18next. I feel it's simple, I don't want to use overcomplicated solutions.

I have a directory structure like

messages/locale_name/domain_name.json

How can I import all the json files in a regular object in my code ?

So far, I'm struggling at the very beginning as I found suggestions which need to require('fs") but webpack tells me it cannot resolve the fs module and I've seen I can't install it as it is part of default node config.

Some help appreciated.

Thanks !

Answer 1

After a lot of futzing around, it was actually pretty easy. Below is what I ended up with. The key was getting the JSON Loader set up properly.

Install the JSON Loader for Webpack

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

Add the JSON Loader to your Webpack loaders

1. This is required to use context to pull the files in.
2. Add this to your webpack.config.js loaders { test: /\.json$/, loader: 'json' },
3. The final might be something like this:

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

Use Context to load the files in and save them into an array

in my app.js:

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

1. Where "modules" is a subdirectory from my app.js (./src/modules in my case).
2. All of the JSON files will be loaded into an array [Object, Object, Object], which I am storing into var modules

Answer 2

This is best done with something like json-loader

With it installed (npm install json-loader --save-dev), you could either import as described in the projects readme:

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

Or you could add a loader to your webpack.config.js and import the json normally:

webpack.config.js:

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

And in your source:

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

Or of course, you could use ES6 imports if that's what you use in your project

Answer 3

To merge json files use merge-webpack-plugin (also with grouping for example by filename)

Example configuration:

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]',
    })
  ]
}

It this example files will be devided into groups by filename. Each group will be loaded and merged and saved into destination json file. To require destination merged file you only need to require one its source file and load it.

Answer 4

@Sébastien check this plugin https://www.npmjs.com/package/merge-jsons-webpack-plugin

You can pass array of files/patterns as an input and it will emit single file as json.

for example if you have many json files inside a directory /node_modules/module-a and /node_modules/module-b

You can use below pattern to concatenate all jsons into one single json file like below

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

Disclaimer: I contributed to this plugin