繁体   English   中英

Webpack 动态导入 .json 文件?

Webpack dynamic import .json file?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在将 React Intl 用于 x 种语言(下面的示例),目前我在设置应用程序的位置导入以下内容:

import { addLocaleData } from 'react-intl';
import locale_en from 'react-intl/locale-data/en';
import locale_de from 'react-intl/locale-data/de';

import messages_en from './translations/en.json';
import messages_de from './translations/de.json';

addLocaleData([...locale_en, ...locale_de]);

...
export const messages = {
    en: messages_en,
    de: messages_de
}

由于无论使用哪种语言都会导入这些语言文件,因此我的主包 js 文件变得非常大,尤其是来自 .json 文件。

如何使用 Webpack 拆分这些语言文件(或使用 CopyWebpackPlugin 将它们复制到我的 dist 文件夹),然后根据当前使用的语言动态导入它们?

该应用程序是同构的,因此相同的代码正在服务器上运行。

1 个回复

我最近一直在做这样的事情,虽然我的项目不需要 SSR。 我发现将动态导入语法与 React 的 Suspense 组件配对可以达到预期的效果。 这是我发现的工作的粗略概述,至少在我的情况下,其中不包括 SSR:

// wrap this around your JSX in App.js:
<React.Suspense fallback={<SomeLoadingComponent />}>
  <AsyncIntlProvider>
    {/* app child components go here */}
  </AsyncIntlProvider>
</React.Suspense>

// the rest is in support of this
// can be placed in another file
// simply import AsyncIntlProvider in App.js

const messagesCache = {};

const AsyncIntlProvider = ({ children }) => {
  // replace with your app's locale getting logic
  // if based on a hook like useState, should kick off re-render and load new message bundle when locale changes (but I haven't tested this yet)
  const locale = getLocale();

  const messages = getMessages(locale);
  return (
    <IntlProvider locale={locale} messages={messages}>
      {children}
    </IntlProvider>
  );
};

function getMessages(locale) {
  if (messagesCache[locale]) {
    return messagesCache[locale];
  }
  // Suspense is based on ErrorBoundary
  // throwing a promise will cause <SomeLoadingComponent /> to render until the promise resolves
  throw loadMessages(locale);
}

async function loadMessages(locale) {
  // dynamic import syntax tells webpack to split this module into its own chunk
  const messages = await import('./path/to/${locale}.json`);
  messagesCache[locale] = messages;
  return messages;
}

Webpack 应该将每个语言环境 JSON 文件拆分为自己的块。 如果没有,则可能在动态导入语法到达 webpack 之前将其转换为不同的模块系统(require 等)。 例如:如果使用 Typescript,tsconfig 需要"module": "esnext"以保留import()语法。 如果使用 Babel,它也可能会尝试进行模块转译。

单个语言环境的块输出看起来像这样; 绝对比通过 CopyWebpackPlugin 实现的要多:

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{

/***/ "./path/to/en-US.json":
/*!*************************************!*\
  !*** ./path/to/en-US.json ***!
  \*************************************/
/*! exports provided: message.id, default */
/***/ (function(module) {

eval("module.exports = JSON.parse(\"{\\\"message.id\\\":\\\"Localized message text\\\"}\");//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvbG9jYWxpemF0aW9uL2VuLVVTLmpzb24uanMiLCJzb3VyY2VzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./path/to/en-US.json\n");

/***/ })

}]);

希望这是一个很好的起点,可以与 SSR 一起使用,也可以修改为与 SSR 一起使用。 请报告您在该主题上的发现。 🙂

4 webpack在构建时动态导入文件

我有大约1000张图像的webpack +打字稿项目。 我也有一个描述此图像的文件,如下所示: 我得到的B,C,D和其他997张图像的代码相同。 在客户端的一天结束时,应在下面生成html: 而且我还使用imageACode将该图像替换为某些html代码(无论如何)。 ...

5 babel生成的Webpack 2动态导入文件

当前设置 通过create-react-app的设置中包含React的Webpack Babel React Intl插件和Manager提取字符串进行翻译 期望的行为 babel插件将生成一个文件,其中包含所有必须翻译的字符串。 到现在为止还挺好。 这是在w ...

6 webpack动态导入文本文件

通常,当我们需要导入一些原始字符串时,我们使用raw-loader 。 常见的用例如下: 在源代码中我们添加: 将生成文件a.txt.js ,其中将包含: 我们在其中导入的源代码将生成在 HTML HEAD 部分添加&lt;script charset="utf-8" sr ...

7 webpack 2动态导入目录中的文件

我有一个带有dir结构的反应应用程序: 我需要一些如何将所有widget-x / reducers / index.js导入mainreducers / index.js。 目前我正在尝试: 但是这也从anotherFolder导入了我的其他index.js(我找到的另一个解决 ...

8 在构建期间动态导入Webpack文件

我正在开发一个具有用于浏览器API的包装的浏览器扩展,我希望能够在构建期间交换出特定于浏览器的包装。 有人告诉我使用process.env.NODE_ENV ,Webpack会丢弃评估为false的代码分支,但我不确定如何/在何处使用它来实现我想做的事情。 ...

2018-04-24 18:58:41 1 79   webpack
10 使用webpack从json文件导入所有图像?

我需要从JSON文件导入所有图像,才能使用Webpack与应用程序一起使用。 我不认为这很重要,但是图像用作背景图像。 我目前正在这样做: 这是工作,但实际上会有更价值观content ,我希望能够加载外部JSON文件。 我也希望该解决方案可以处理不同数量的图像。 如何才能做 ...

2017-08-30 09:14:54 0 184   webpack
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM