https://github.com/airbnb/javascript
$ npm install
$ npm run dev
$ npm run trans
- Chinese: http://127.0.0.1:8989
- English: http://127.0.0.1:8989/index-en.html
🌏 example about`antd`/`antd-mobile` internationalization
https://github.com/airbnb/javascript
$ npm install
$ npm run dev
$ npm run trans
比如
const columns = [{
title: '姓名',
dataIndex: 'name',
key: 'name',
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
}];
切换到英文时对应为
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
}];
一般怎么处理呢?
是通过 window.appLocale 判断语言 替换数据吗?
我按照示例配置到我的项目以后,无法生成 i18n-messages
文件啊,
webpack:
const webpack = require('webpack');
module.exports = {
entry: {
app: ['./src/entry.jsx'],
en: ['./src/langEntry/en-US.js'],
zh: ['./src/langEntry/zh-Hans-CN.js'],
common: [
'react', 'react-dom', 'react-router',
'redux', 'react-redux', 'moment',
'classnames', 'object-assign', 'redux-saga',
'react-router-redux', 'js-cookie', 'whatwg-fetch',
'babel-polyfill',
],
},
watch: true,
output: {
publicPath: `dist`,
filename: `[name].bundle.js`,
},
module: {
loaders: [
{
test: /\.jsx$/,
loaders: ['babel'],
},
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['babel'],
},
{
test: /\.css$/,
loaders: ['style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'],
},
{
test: /\.(ttf|eot|svg|woff)/,
loader: 'file?name=[sha512:hash:base64:7].[ext]',
},
{
test: /\.(png|jpg|jpeg|gif)$/,
loaders: ['file'],
},
{
test: /\.json$/,
loaders: ['json'],
},
],
},
resolve: {
extensions: ['', '.js', '.jsx', '.scss', '.css', '.json'],
},
plugins: [
//new I18Plugin(lang),
new webpack.optimize.CommonsChunkPlugin({
names: ['common', 'manifest'],
filename: `[name].chunk.js`,
minChunks: Infinity,
}),
new webpack.DefinePlugin({
process: {
env: {
NODE_ENV: JSON.stringify('development'),
},
},
}),
],
};
.babelrc
{
"presets": ["es2015", "react"],
"plugins": [
["import", [{ "libraryName": "antd" }]],
["react-intl",[{"messagesDir": "./i18n-messages"}]]
]
}
l10n.config.js
是和示例中一样的 ,不知道在哪里出现问题了。
npm run build:i18n-js
请问,这个脚本在什么地方,该怎么写呢?
在文档中看到了用 npm run build:i18n-js 自动生成,但是我在项目中并没有看到。能麻烦详细描述一下吗
I'm having a problem when I try to use the notification component.
I want to set a ReactNode like this:
notification.open({
message: 'Notification Title',
description: (<FormattedMessage
id="myKey"
/>)
});
But that is because the HTML element that is created to show the notification is rendered at body
level. So, it's not wrapped inside a IntlProvider
. It makes sense.
However, I need to show translated messages. Is there any change to make it work?
目前生成了 index.html & index.en.html,但是这种方式意味着在访问 /index.html 时就已经决定了语言;
在某些场景下,无法满足需求,比如我有两个系统 A、B,需求是:
于是,从实现上来说,我们会利用 cookie 存储上次选择的语言,并以此来达到多个系统间切换时保持语言一致的功能。
这个时候有两种做法:
🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial
branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.
我正在用dva,antdesign和react-intl框架开发一个单页应用程序,并且使用react-intl实现国际化。我在最外层的index.js用 <IntlProvider>
将所有的组件都包裹起来,这样所有的子组件都能访问到intl对象。
I am building a SPA using dva, antdesign and react-intl. I enclosed all the other components with <IntlProvider>
component from react-intl therefor all the children components have access to the intl object.
绝大部分页面和组件都工作正常,但是antdesign的Modal所显示的内容,用react-intl的<FormattedMessage id="message.id"/>
之后报错,错误信息是:[React Intl] Could not find required intl object. <IntlProvider> needs to exist in the component ancestry.
Most of the pages and components are working fine, however antdesign Modal cannot render the content after I changed the content to <FormattedMessage id="message.id"/>
. The error message is: [React Intl] Could not find required intl object. <IntlProvider> needs to exist in the component ancestry.
我通过Chrome的React插件观察了组件的结构,出现此问题的原因是Model组件是写在最外面(和App平级的)的这样就不是<IntlProvider>
的子组件了,请参见下图。
I inspected the page using Chrome React plugin, the reason was that Modal component is rendered at the top level, same level as the app. Please refer to screen shot below.
一个解决办法是把所有使用到Modal的页面和组件再次引入语言包并用包裹一遍,不过这个办法貌似不太好,请问有什么更好的解决办法吗?谢谢!
A resolution is to import the React Intl's locale data and enclose the Modal content with for all the pages and components that use antdesign Modal, but I don't think it's a good idea. Any other suggestions are appreciated. Thanks!
目前项目比较庞大,国际化的文件已经接近500行,打算分文件管理,想请教下有没有可行的方案。
测试了一下报了如下的错:
➜ intl-example git:(master) ✗ npm run dev
> [email protected] dev /Users/samliu/gits/demos/intl-example
> dora -p 8001 --plugins webpack,proxy,hmr,livereload
(node:39378) [DEP0016] DeprecationWarning: 'GLOBAL' is deprecated, use 'global'
proxy: listened on 8989
livereload: listening on 35729
(node:39378) ExperimentalWarning: The fs.promises API is experimental
📦 650/650 build modules
webpack: bundle build is now finished.
Caught exception: TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
at maybeCallback (fs.js:140:9)
at Object.fs.writeFile (fs.js:1258:14)
at Recorder.self.updateRecordBody (/Users/samliu/gits/demos/intl-example/node_modules/dora-anyproxy/lib/recorder.js:103:12)
at Recorder.self.updateRecord (/Users/samliu/gits/demos/intl-example/node_modules/dora-anyproxy/lib/recorder.js:64:14)
<FormattedMessage id="title" defaultMessage="中文"/>
=>
{
title: "中文"
}
...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.