Question

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

我有一个像

这样的目录结构

消息/ LOCALE_NAME / domain_name.json

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

到目前为止，我一开始就在苦苦挣扎，因为我找到了需要（'fs'）的建议，但是webpack告诉我它无法解析fs模块而且我看到我无法安装它，因为它是默认节点配置的一部分。

一些帮助表示赞赏。

谢谢！

Answer 1

经过充实的很多之后，它实际上非常简单。以下是我最终的结果。关键是正确设置JSON Loader。

为Webpack安装JSON Loader

npm install --save-dev json-loader

将JSON Loader添加到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

Answer 2

最好使用json-loader

之类的功能

安装它（m_ColumnAssociations）后，您可以按照项目自述文件中的说明导入：

correspondingMatrices

或者你可以在你的webpack.config.js中添加一个加载器并正常导入json：

webpack.config.js：

npm install json-loader --save-dev

在你的来源：

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

当然，您可以使用ES6导入，如果这是您在项目中使用的内容

Answer 3

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

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

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

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

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

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

Answer 4

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

示例配置：

SELECT fname, 
       mname, 
       lname, 
       Date_part('year', Age(birthdate)) :: int AS age, 
       birthdate, 
       regstnum, 
       regstfrac, 
       regstname, 
       regsttype, 
       regstpredirection, 
       regstpostdirection, 
       regunittype, 
       regunitnum, 
       regcity, 
       (SELECT Array_to_json(Array_agg(Row_to_json(ROW(v.fname, v.lname, 
                                                   Date_part('year', Age( 
                                                   v.birthdate)) :: int, 
               v.birthdate)))) 
        FROM   voters AS v 
        WHERE  ( v.regstnum = voters.regstnum 
                  OR voters.regstnum IS NULL ) 
               AND ( v.regstfrac = voters.regstfrac 
                      OR voters.regstfrac IS NULL ) 
               AND ( v.regstname = voters.regstname 
                      OR voters.regstname IS NULL ) 
               AND ( v.regsttype = voters.regsttype 
                      OR voters.regsttype IS NULL ) 
               AND ( v.regstpredirection = voters.regstpredirection 
                      OR voters.regstpredirection IS NULL ) 
               AND ( v.regstpostdirection = voters.regstpostdirection 
                      OR voters.regstpostdirection IS NULL ) 
               AND ( v.regunittype = voters.regunittype 
                      OR voters.regunittype IS NULL ) 
               AND ( v.regunitnum = voters.regunitnum 
                      OR voters.regunitnum IS NULL ) 
               AND ( v.regcity = voters.regcity 
                      OR voters.regcity IS NULL ) 
               AND v.fname != voters.fname)     AS voters_at_same_address 
FROM   voters 
WHERE  "fname" = 'TIMOTHY' 
       AND "lname" = 'CLEMANS';

此示例文件将按文件名分组。每个组将被加载并合并并保存到目标json文件中。要求目标合并文件，您只需要一个源文件并加载它。

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

4 个答案: