Webpack ES6-使用動態導入加載Json（保留json文件）

Question

我正在嘗試將我的json文件（2個文件）拆分為單獨的塊。 我能夠做到，但有一個“騙局”。

這些JSON的轉換成.js通過的WebPack，這就是為什么我添加了一個file-loader到.json文件，但是await import現在返回一個字符串，而不是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捆綁js file-loader 。

注意：沒有這個規則，應用程序工作正常，但我需要那些.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<...>而不是i18n.0<...> ，並且該文件具有以下內容：

(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;

這將以json的形式返回文件，這一切都完美無缺。

注意

開發構建：webpack-dev-server（服務器）+ ASP.Net Core（API）

生產構建：ASP.Net Core（服務器和API）