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

Question

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

我有一个类似的目录结构

消息/ LOCALE_NAME/domain_name.json

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

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

一些帮助赞赏.

谢谢 !

Answer 1

经过大量的摸索，这实际上很容易。以下是我最终得到的结果。关键是正确设置JSON Loader。

安装JSON Loader for Webpack

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. 其中“模块”是我的app.js（在我的情况下是./src/modules）的子目录。
2. 所有JSON文件将被加载到一个数组中[Object, Object, Object]，我将其存储到其中var modules

Answer 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 导入，则可以使用 ES6 导入