我正在用webpack构建一个reactJs bundle。我目前正在尝试将json文件连接到一个对象中,以便与i18next一起使用。我觉得这很简单,我不想使用过于复杂的解决方案。
我有一个目录结构,
messages/locale_name/domain_name.json
如何在代码中将所有json文件导入到一个常规对象中?
到目前为止,我在一开始就很挣扎,因为我发现需要require('fs”)的建议,但webpack告诉我它无法解析fs模块,我已经看到我无法安装它,因为它是默认节点配置的一部分。
一些帮助赞赏。
谢谢你,谢谢
4条答案
按热度按时间zzoitvuj1#
经过 * 很多 * futzing左右,这实际上是相当容易的。下面是我结束了。关键是得到JSON加载器设置正确。
安装Webpack的JSON Loader
1.第一个月
将JSON Loader添加到您的Webpack加载器
1.这是使用上下文拉文件所必需的。
1.将其添加到您的webpack.js.js加载器
{ test: /\.json$/, loader: 'json' },
中1.最后可能是这样的:
字符串
使用Context加载文件并保存到数组中
在我的app.js中:
型
1.其中“modules”是我的app.js中的一个后缀(在我的例子中是./src/modules)。
1.所有的JSON文件将被加载到数组
[Object, Object, Object]
中,我将其存储到var modules
中qltillow2#
最好使用类似json-loader的代码完成此操作
安装了它(
npm install json-loader --save-dev
)后,您可以按照项目自述文件中的描述导入:字符串
或者你可以在webpack.js.js中添加一个loader,然后正常导入json:
webpack.config.js:
型
在你的资料中:
型
当然,如果在项目中使用ES6导入,也可以使用它
af7jpaap3#
要合并json文件,请使用merge-webpack-plugin(也可以按文件名分组)
示例配置:
字符串
它这个例子文件将被划分成组的文件名。每个组将被加载和合并,并保存到目标json文件。要要求目标合并文件,你只需要要求一个它的源文件,并加载它。
gblwokeq4#
@Sébastien检查此插件https://www.npmjs.com/package/merge-jsons-webpack-plugin
你可以将文件/模式的数组作为输入,它会将单个文件作为JSON输出。
例如,如果在/node_modules/module-a和/node_modules/module-b目录中有许多JSON文件,
您可以使用下面的模式将所有JSON连接到一个JSON文件中,如下所示
字符串
免责声明:我对这个插件有贡献