問題タブ [babel-plugin-react-intl]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
1411 参照

react-intl - babel-plugin-react-intl を使用する利点は何ですか?

私は図書館を学び、理解しようとしてきましたが、react-intl図書館に出会いbabel-plugin-react-intlました。図書館のページにそのような説明があります。

Extracts string messages for translation from modules that use React Intl.

どの文字列メッセージが抽出されるのだろうか?

また、抽出されたメッセージの利点は何ですか?

0 投票する
1 に答える
1036 参照

react-intl - babel-loader を使用して babel-plugin-react-intl をロードする方法は?

最近、create-react-app を使用して反応アプリを初期化しました。アプリをイジェクトしたところ、すべてのファイルがメイン ディレクトリにエクスポートされました。このセットアップでは、.babelrc を使用する代わりに、babel.dev.js を作成します (babel-loader を使用します)。

.babelrc ファイルなしで react-intl と babel-plugin-react-intl を構成する方法を見つけようとしています。

ドキュメントには、.babelrc が推奨されていると書かれています

.babelrc 経由 (推奨)

.babelrc

babel-loader でこの動作を行う構文は何ですか? 現在、babel.dev.js のプラグインは次のようになっています。

私のコンポーネントには現在、次のように定義された文字列があります。

0 投票する
3 に答える
3131 参照

reactjs - オブジェクト参照を渡すときに、react-intl の defineMessages がエラーをスローするのはなぜですか?

react-intlYahoo! から頭を動かそうとしています。i18n プロジェクトで、奇妙な問題が発生しています。私の目標は、基本文字列 (英語) をコンポーネントの外部にある何らかの JSON ファイルに保存して、開発者以外が編集できるようにすることです。

importコンポーネントで必要な部分だけを使用することは論理的に思えますがdefineMessages、これを行うと関数によってエラーが発生します。

編集:問題は、babel-plugin-react-intlプラグインとデフォルト文字列の「エクスポート」にあるようです。アプリは正常に動作しますが、npm run buildコマンドを実行するとエラーが発生します。

.babelrc:

webpack-config:

パッケージ.json:

動作するコード:

失敗するコード:

オブジェクトの代わりに参照を直接渡そうとすると、次のエラー メッセージが表示されます。

0 投票する
2 に答える
8724 参照

react-intl - React Intlを使用してロケールデータを動的に追加するには?

UI Util ライブラリの国際化に React-intl を使用しています。ライブラリには i18n というフォルダがあり、ここにさまざまなロケールの json ファイルを配置します。このライブラリのユーザーが追加のロケールのサポートを追加したい場合は、それぞれのロケールのキーと値のペアを含む追加の json ファイルを配置できます。

ただし、React-intl では、事前にそれぞれのロケールの LocaleData をインポートして追加する必要があります。たとえば、

React-intl で、LocaleData を追加して、それぞれのロケールのロケール ライブラリを動的にインポートする方法はありますか?

0 投票する
1 に答える
1127 参照

reactjs - Webpack 1 でビルドするときに、react-intl メッセージからバックスラッシュをレンダリングする

概要

Webpack Dev Server を使用してアプリをロードすると、メッセージが正常に表示されます: \. ただし、アプリケーションをディスクにバンドルしnginx、 を介してバンドルをサーバーに送信すると、バックスラッシュが重複しています: \\

詳細

react-intl@2.2.3 (現時点では最新) とbabel-plugin-react-intl@2.3.1 (現時点では最新) を使用しています。私の目標は、文字を使用してデフォルトのメッセージを定義し、\任意の方法 ( 、 など) でレンダリングすることFormattedMessageですformatMessage

Webpack / Babel を使用してアプリをバンドルしています。webpack.config.jsファイルにBabel / react-intl 固有の構成はありませんが、またはDefinePluginに設定process.envするために使用します'development''production'

Webpack Dev Server を使用してアプリをロードすると、メッセージが正常に表示されます: \. ただし、アプリケーションをディスクにバンドルし、 経由nginxでバンドルを提供すると、バックスラッシュが重複しています: \\。ここに次の指示があります: https://github.com/yahoo/babel-plugin-react-intl/issues/13#issuecomment-151944191 4\文字を使用して最終\文字を表示することに関して。

価値のあるものとして、JSX 文字列、JS 文字列、1、2、および 4\文字の使用、および考えられるその他のばかげた組み合わせを使用してみました。

ヒントや提案は大歓迎です。ありがとうございました。

コードサンプル

メッセージの定義方法の例

メッセージをレンダリングする方法の例

別の例も機能しません

さらに別の失敗例: