0

我有一个设置来使用 webpack 来管理我的所有资产。它工作正常。现在我打算使用 react-intl version 2 来支持多种语言。

我设法使包'react-intl'中定义的组件工作，

import {IntlProvider, FormattedNumber, FormattedPlural} from 'react-intl'; 

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
        name       : 'Eric',
        unreadCount: 1000,
    };
}

render() {
    const {name, unreadCount} = this.state;

    return (
        <p>
            Hello <b>{name}</b>, you have {' '}
            <FormattedNumber value={unreadCount} /> {' '}
            <FormattedPlural value={unreadCount}
                one="message"
                other="messages"
            />.
        </p>
    );
    }
}

但我无法弄清楚通过 webpack 加载语言环境文件并在组件中引用它们的正确方法是什么。由于该软件包最近进行了重大升级，因此也没有太多关于它的文档。wiki 页面现在是空的

https://github.com/yahoo/react-intl/wiki

我想知道这样做的正确方法是什么？

4

1 回答 1

0

xiopang，我刚刚基于 react-intl v2 的翻译示例编写了一个 webpack 插件。希望它对你有用：https ://gist.github.com/marr/95f7a8a3f5529e7e668048548198b9eb

webpack 配置插件看起来像：

new TranslateWebpackPlugin(),
new HtmlWebpackPlugin({
  template: 'index.hbs', // Load a custom template
  inject: 'body', // Inject all scripts into the body
  chunks: [ 'app' ],
  app: true
}),

和 index.hbs：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      window.App = <%= htmlWebpackPlugin.options.app %>
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

于 2016-03-29T23:38:47.237 回答