JavaScript / webpack:如何通过自定义循环连接目录中的所有JSON文件

6qftjkof  于 11个月前  发布在  Webpack
关注(0)|答案(4)|浏览(155)

我正在用webpack构建一个reactJs bundle。我目前正在尝试将json文件连接到一个对象中,以便与i18next一起使用。我觉得这很简单,我不想使用过于复杂的解决方案。
我有一个目录结构,
messages/locale_name/domain_name.json

如何在代码中将所有json文件导入到一个常规对象中?

到目前为止,我在一开始就很挣扎,因为我发现需要require('fs”)的建议,但webpack告诉我它无法解析fs模块,我已经看到我无法安装它,因为它是默认节点配置的一部分。
一些帮助赞赏。
谢谢你,谢谢

zzoitvuj

zzoitvuj1#

经过 * 很多 * futzing左右,这实际上是相当容易的。下面是我结束了。关键是得到JSON加载器设置正确。

安装Webpack的JSON Loader

1.第一个月

将JSON Loader添加到您的Webpack加载器

1.这是使用上下文拉文件所必需的。
1.将其添加到您的webpack.js.js加载器{ test: /\.json$/, loader: 'json' },
1.最后可能是这样的:

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$/) );


1.其中“modules”是我的app.js中的一个后缀(在我的例子中是./src/modules)。
1.所有的JSON文件将被加载到数组[Object, Object, Object]中,我将其存储到var modules

qltillow

qltillow2#

最好使用类似json-loader的代码完成此操作
安装了它(npm install json-loader --save-dev)后,您可以按照项目自述文件中的描述导入:

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

字符串
或者你可以在webpack.js.js中添加一个loader,然后正常导入json:
webpack.config.js:

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


在你的资料中:

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


当然,如果在项目中使用ES6导入,也可以使用它

af7jpaap

af7jpaap3#

要合并json文件,请使用merge-webpack-plugin(也可以按文件名分组)
示例配置:

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

gblwokeq

gblwokeq4#

@Sébastien检查此插件https://www.npmjs.com/package/merge-jsons-webpack-plugin
你可以将文件/模式的数组作为输入,它会将单个文件作为JSON输出。
例如,如果在/node_modules/module-a和/node_modules/module-b目录中有许多JSON文件,
您可以使用下面的模式将所有JSON连接到一个JSON文件中,如下所示

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

字符串
免责声明:我对这个插件有贡献

相关问题