如何使用react-intl v2 + webpack加载语言环境文件？
如何使用react-intl v2 + webpack加载语言环境文件？
提问于 2016-03-16 20:29:00
我有一个设置，可以使用webpack来管理我所有的资产。它工作得很好。现在我计划使用react-intl版本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加载locale文件并在组件中引用它们的正确方法是什么。由于该包最近进行了突破性的升级，因此也没有太多的相关文档。维基页面暂时是空的
https://github.com/yahoo/react-intl/wiki
我想知道这样做的正确方法是什么？
回答 1
Stack Overflow用户
发布于 2016-03-30 07:38:47
小胖，我刚刚写了一个基于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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36035723
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号