Webpack ES6- 使用动态导入加载 Json（保留 json 文件）

Question

我正在尝试将我的 json 文件（2 个文件）拆分成单独的块。我能够做到，但是有一个 "con".

那些 json 被 webpack 转换成 .js，这就是为什么我在 .json 文件中添加了 file-loader，但是 await import 现在returns 一个字符串而不是 json.

Webpack 规则

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加载而不是默认的webpack bundling js

注意：没有这个规则，应用程序工作正常，但我需要那些.json的

这是最终结果：

两个json都可以。问题是 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 因为它可能在服务器端被编辑。

Answer 1

好的，我是怎么解决这个问题的？

我没有使用 import()，而是对文件发出了一个 xhr 请求。

但是有一个问题，我仍然需要将文件放在 dist 文件夹中。

为此，我使用了 copy-webpack-plugin，这样您就可以在捆绑过程中将文件和文件夹转储到任何地方。

我删除了 json 规则，并添加了这样的插件：

new CopyWebpackPlugin([{ from: "src/translations/i18n", to: "i18n" }]),

好的，它正在将 i18n 文件夹转储到 dist:

在此之后，我将函数 getLanguageFile 更改为：

export const getLanguageFile = async (lang = "en-US") 
   => (await axios.get(`/i18n/${lang}.json`)).data;

这将 return 文件作为 json 并且一切正常。

备注

开发构建：webpack-dev-server（服务器）+ ASP.Net核心（API）

生产版本：ASP.Net 核心（服务器和 API）

Webpack ES6- 使用动态导入加载 Json（保留 json 文件）

Webpack ES6- Load Json with dynamic import (Preserve json file)

javascript

ecmascript-6

reactjs

webpack

webpack-file-loader