聊聊前端國際化文案該如何處理

時間 2019-11-15

標籤聊聊前端國際化文案如何處理简体版

原文原文鏈接

背景

最近接到一個海外項目業務需求，項目最終會被來自不一樣國家的客戶所使用，指望能讓客戶有一個良好的用戶體驗，所以前端須要適配國際化。css

面臨的挑戰

乍一聽，這個海外項目需求並無什麼特別的地方，彷佛就多了一個國際化適配。但細細一想，事情可沒這麼簡單，前端開發面臨了不少新的問題。下面梳理一下國際化開發中一般會面臨的挑戰：前端

頁面文案所有可配置
須要配置的文案大體有四種：label、placeholder、字段校驗提示信息、超連接。
頁面文案樣式處理

文案樣式須要特別注意，不一樣語言的文字，可能會有不一樣的表現。例以下面兩張圖所示：node

英語（頁面樣式正常）
俄語（頁面樣式異常）

日期、數字格式處理

頁面上展現日期或數量的地方，也是須要作國際化適配。react

LTR／RTL

不少中東國家的語言習慣都是 RTL，能夠嘗試使用 direction 和 transform 來解決。git

圖片（banner）國際化

若是你想把國際化作的足夠精細，那麼圖片國際化也是須要考慮的。github

第三方 UI 組件

若是使用了第三方 UI 組件，如：elementUI、ant design UI 等，這些 UI 框架一般都宣稱支持國際化，但支持的國際化語言數量有限，並不必定能知足業務需求。web

前端開發工做量和後期維護成本激增

大量的文案須要被提取出來，被提取出來的文案最終會被合併到一個文件中去，如：en-US.json。這些工做若是經過手工完成，那麼工做量會是很是巨大的。json

國際化文案的處理思路

以上列舉出了不少挑戰，但實際上「頁面文案處理」纔是最主要的矛盾，由於它直接致使前端開發工做量和維護成本的激增。下面咱們重點來討論文案處理思路，其實從實現國際化的角度來看，jQuery、Vue、React 等都只是載體而已，實現思路都是相通的，所以國際化文案處理與具體的技術框架並不耦合。接下來將會拋出幾種國際化文案處理思路，每種思路對生產力和生產關係的要求有高有低，姑且將其分別對應爲石器時期、青銅時期、黃金時期。api

石器時期

傳統的國際化開發流程：前端開發到必定階段，將文案提取到資源文件（一般爲 en-US.json），而後將資源文件發送給翻譯團隊，翻譯團隊翻譯出各國語言版本的文案，每種語言對應一個資源文件，最後將這些資源文件發回給前端開發人員，前端開發人員更新到本身本地。以下圖所示：babel

適用場景
1. 頁面上要提取的文案很少
2. 支持的國際化語言較少，好比：只須要支持中文和英文
3. 項目需求較固定，後期只作簡單維護，不會新增大的需求
分析

這是國際化開發的基本流程，「前端開發」和「翻譯團隊」是必不可少的兩個節點，但它們相互之間依賴的過重。「提取文案」的過程本質上是在重複勞動，所以能夠考慮由程序來完成。

代碼示例

App.js

import React, { Component } from 'react';
import { IntlProvider, FormattedMessage } from 'react-intl';
import qs from 'querystring';

import logo from './logo.svg';
import './App.css';

import DEFAULT_MESSAGES from './i18n/en-US.json';

const DEFAULT_LOCALE = 'en-US';
class App extends Component {
  state = {
    messages: DEFAULT_MESSAGES,
  };

  componentWillMount() {
    const search = window.location.search.slice(1);
    const params = qs.parse(search);
    const locale = params.locale || DEFAULT_LOCALE;
    const messages = require(`./i18n/${locale}.json`);
    debugger;
    this.setState({
      messages,
    });
  }

  render() {
    const { messages } = this.state;
    return (
      <IntlProvider locale="en" messages={messages}>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              <FormattedMessage
                id="welcome"
                defaultMessage={`Hello world!`}
              />
            </p>
            <a
              className="App-link"
              href="/?locale=zh-CN"
              rel="noopener noreferrer"
            >
              zh-CN
            </a>
            <a
              className="App-link"
              href="/?locale=en-US"
              rel="noopener noreferrer"
            >
              en-US
            </a>
          </header>
        </div>
      </IntlProvider>
    );
  }
}

export default App;