Я пытаюсь разбить мои файлы json (2 файла) на отдельные куски.Я смог сделать это, но есть «против».
Эти json'ы конвертируются в .js через веб-пакет, поэтому я добавил file-loader к .json файлам, однако await import теперь возвращает строку вместо json.
Правила веб-пакета
module: {
rules: [
{ test: /\.scss$/, use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader",] },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=fonts/[name].[ext]" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/vnd.ms-fontobject&name=fonts/[name].[ext]" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml&name=fonts/[name].[ext]" },
{
test: /\.(js|jsx)$/,
// Skip any files outside of project's `src` directory
include: [
path.resolve(__dirname, "../src"),
],
loaders: ["babel-loader"],
},
{
test: /\.json$/,
type: "javascript/auto",
loader: "file-loader",
options: { name: "i18/[name].[ext]" },
include: [
path.resolve(__dirname, "../src"),
],
},
{ test: /\.(jpg|png)$/, loader: "url-loader" }
]
}
Обратите внимание на правило test: /\.json$/.
Здесь яговоря, что я хочу, чтобы он загружался file-loader вместо стандартного комплектования веб-пакетов js.
Примечание: Без этого правила приложение работает нормально, но мне нужны эти .json's
Это окончательный результат:
Оба JSON's в порядке.Проблема с i18n.0<...> и i18n.1, которые представляют en-US и pt-PT.
Теперь ... Я вызываю эти файлы, используя динамический импорт (без транспиляции):
/* This loading must be async, it will load the file from the server on-demand */
export const getLanguageFile = async (lang = "en-US")
=> await import(/* webpackChunkName: "i18n." */ `../i18n/${lang}.json`);
Затем он вызывается здесь:
async componentDidMount() {
/* Get user info (properties) */
var properties = await fetch.get("/account/GetUserProperties");
/* Get language file based in the language code provided in the properties */
var file = await getLanguageFile(properties.data.LanguageCode);
this.props.setUserProperties(properties.data, file);
}
Последней переменной file присваивается:
Эта переменная должна иметь полный json, присутствующий в файле.
Я знаю, почему это происходит, потому что это вызовет i18n.0<...> вместо .json, и этот файл имеет следующее:
(window.webpackJsonp = window.webpackJsonp || [])
.push(
[[2], {
"./src/translations/i18n/en-US.json": function (n, o, s) {
n.exports = s.p + "i18/en-US.json"
}
}]
);
Как я могу вызывать эти json, используя динамический импорт, но сохраняя полный файл json?
Мне нужен json, потому что он может редактироваться на стороне сервера.