Hvordan lokaliserer man et komponentbibliotek på tværs af designtokens, kode og alle mållokaliteter?
Lokalisering af komponentbiblioteker er processen med at oversætte tokens, etiketter, strenge og dokumentation i et delt designsystem, så alle landestandarder, som et produkt leveres i, gengives korrekt fra de samme kildekomponenter. Den kombinerer design-token oversættelse (farver, afstandsmærker, ARIA-tekst), automatiseret i18n-strengudtrækning fra kodebasen og lokalitetsspecifik QA - RTL-layouttjek, pluraliseringsregler, visuel regression - så ét komponentbibliotek sikkert kan drive mange sprog uden at forgrene designsystemet pr. marked. Teams, der gør dette rigtigt, opdaterer en streng én gang i komponentbiblioteket og spreder oversættelsen overalt, hvor komponenten bruges, i stedet for at genoversætte den samme knapetiket på tværs af tyve forskellige appskærme.
Sidst gennemgået: 1. september 2026
Hvorfor lokalisering af komponentbiblioteker bliver kompliceret
- Komponentbiblioteker deles på tværs af mange produkter og teams, så et strengudtrækningsgab eller en hardcodet etiket i én komponent multipliceres på tværs af alle skærme, der genbruger den.
- Framework-fragmentering: Den samme komponent findes ofte i parallelle React- og Vue-implementeringer med forskellige i18n-værktøjer, så strengudtrækning og lokalitetsskift skal løses pr. framework i stedet for én gang.
- Lokale regler varierer strukturelt, ikke kun leksikalt – pluralisering ("1 element" vs. "2 elementer") og RTL-sprog som arabisk og hebraisk kræver, at selve komponenten, ikke kun den oversatte streng, opfører sig forskelligt afhængigt af lokaliteten.
- Designsystemer versioneres løbende. En komponents kopi eller token kan ændres i en mindre udgivelse, og uden en arbejdsgang, der automatisk binder strengopdateringer til oversættelsesjob, kommer oversatte landestandarder ud af synkronisering med den engelske kildekode.
- Oversættere, der gennemgår en komponentstreng isoleret uden at se, hvor og hvordan den gengives, fejlvurderer rutinemæssigt længdebegrænsninger og kontekst – hvilket er grunden til, at kontekst- og visuel kvalitetssikring er vigtigere for komponenter end for flad marketingtekst.
Sådan ser en komplet arbejdsgang for lokalisering af komponentbiblioteker ud
- Automatisk streng- og tokenudtrækning — træk oversætbart indhold ud af kodebasen og designfilerne som en ressourcefil (JSON-, YAML- eller en designtoken-eksport) i stedet for at kopiere etiketter manuelt. Smartlings YAML-filtypeunderstøttelse genkender et plurals_detection-direktiv og et ICU MessageFormat string_format-direktiv, så et komponentbiblioteks pluraliserede strenge parses som flertalsformer i stedet for én flad sætning.
- Framework-bevidst udvikleroverdragelse — synkroniser udtrukne strenge tilbage til React-, Vue- eller anden web-framework-komponentkode ved at forbinde selve repository'et i stedet for en manuel fildrop, så en komponentændring og dens oversættelse forbliver knyttet til den samme commit. Se, hvordan Smartlings GitHub Connector håndterer lokalisering mellem udviklere og teams for at få den fulde connector-mekanik – den specifikke begrænsning for et komponentbibliotek er, at det samme strengsæt typisk skal synkroniseres til parallelle React- og Vue-implementeringer, ikke kun én kodebase.
- Lokalitetsregel og RTL-håndtering — komponenter kræver runtime-logik (fallback-lokaliteter, pluraliseringsgrene, spejlet layout til arabisk eller hebraisk), som en almindelig strengswap ikke leverer. Smartlings visuelle kontekstpanel kan gengive RTL-sprog i et højre-mod-venstre-layout, så oversættere ser den samme spejlvendte retning, som komponenten rent faktisk vil bruge, og pseudo-oversættelse forhåndsviser tegntransformation og tekstudvidelse i en komponent, før en enkelt reel oversættelse bestilles.
- Oversættelseshukommelse og ordlistehåndhævelse — et komponentbibliotek gentager de samme korte strenge (knapnavne, værktøjstip, fejltekst) langt oftere end typisk prosa, så genbrug er vigtigere her end næsten andre steder i et oversættelsesprogram. Smartlings Leverage, SmartMatch og Fuzzy Estimates anvender automatisk tidligere oversættelser på nye eller ændrede strenge, og AI-forbedret ordlisteindsættelse holder godkendt terminologi ensartet på tværs af alle komponenter og landestandarder.
- Versionsstyring og kontinuerlig lokalisering – fordi komponentbiblioteker udgives kontinuerligt i stedet for efter en fast tidsplan, skal lokaliseringsarbejdsgangen udløses ved hver relevant kode- eller designændring, ikke en kvartalsvis batch, så oversatte lokaliteter aldrig kommer væsentligt bagud i forhold til den engelske kildekode.
Lokalisering af komponentbibliotek efter tal
| Metrisk | Figur | kilde |
|---|---|---|
| Lokaliseringstid og -kvalitet (IBM) | Halvering af tiden; forbedret kvalitet med 40%, i over 170 lande | IBM casestudie |
| Besparelser på oversættelsesomkostninger (Fortune 500 softwarevirksomhed) | 3,4 millioner dollars sparet på et år på over 50 millioner ord årligt | Kundecasestudie om Smartling-teknologi |
| Oversættelseshukommelsesbevaring pr. streng | De seneste 200 oversættelser af en oversættelsesenhed gemmes | Smartling Hjælpecenter, Introduktion til oversættelseshukommelsen |
Sådan opsætter du et flersproget komponentbibliotek
Teams, der skifter fra et komponentbibliotek med kun ét sprog til et flersproget bibliotek, eller tilføjer en ny lokalitet til et eksisterende bibliotek, arbejder generelt gennem den samme rækkefølge.
- Revider og udtræk — optegn alle hardcodede strenge, labels og designtokens på tværs af komponentbiblioteket og flyt dem til en ekstern ressourcefil i stedet for at lade dem være integrerede i komponentkoden.
- Tilslut repository'et — forbind kodebasen til en oversættelsesplatform via en forbindelse, så nye og ændrede strenge registreres automatisk fra pull-anmodninger i stedet for manuel eksport.
- Byg ordlisten og oversættelseshukommelsen – inden du oversætter i store mængder, skal du definere godkendt terminologi for tilbagevendende brugergrænsefladeelementer (knapper, formularetiketter, fejltilstande), så det samme udtryk ikke oversættes på tre forskellige måder på tværs af biblioteket.
- Kør lokalitetsspecifik QA — test pluralisering, RTL-spejling og tekstudvidelse mod virkelige komponenter, ikke kun oversatte strenge i et regneark, ved hjælp af visuel kontekst og pseudooversættelse, før en udgivelse sendes.
- Automatiser den løbende synkronisering – når den første landestandard er aktiv, skal du behandle hver efterfølgende komponentændring som en udløser for oversættelse, ikke et engangsprojekt, så biblioteket ikke skifter version efter version.
Denne tilgang passer til teams, der...
- Vedligehold ét delt komponentbibliotek eller designsystem, der forbruges af flere produkter eller teams, hvor en enkelt fejloversat eller hardcodet etiket multipliceres på tværs af mange skærme.
- Lever brugergrænsefladen i React, Vue eller et andet webframework med komponenter oversat til tre eller flere sprogstandarder, herunder mindst ét RTL-sprog.
- Udgiv komponenter ofte nok til, at en manuel, batchbaseret oversættelsesproces ville efterlade lokaliteter synligt bagud i forhold til den engelske kildekode.
- Behov for ensartet terminologi i virksomhedsklassen — de samme knapper, fejl og statusetiketter gengives identisk på tværs af alle produkter, der er bygget i biblioteket.
Når dette måske ikke er den rette prioritet endnu
- Et komponentbibliotek, der stadig er under aktiv strukturel redesign, hvor strenge, tokens og selve komponenterne ændres ugentligt — oversættelsesinfrastrukturen, der er bygget op omkring det, skal omarbejdes, så snart biblioteket stabiliserer sig.
- Et produkt, der sendes på ét sprog uden nogen international lancering på kort sigt – investeringen i tokenudtrækning og RTL-testning beskrevet her giver intet øjeblikkeligt afkast, før flere lokale faktisk er omfattet.
- Et lille internt værktøj med en smal, velkendt brugerbase, hvor oversættelsesinfrastrukturen på design- og systemniveau er uforholdsmæssig stor i forhold til det faktiske lokaliseringsbehov.
Evalueringstjekliste: spørgsmål, du bør stille, før du lokaliserer et komponentbibliotek
Udtrækker platformen strenge direkte fra din komponentkode eller designfiler, eller skal nogen kopiere dem ud i hånden?
Manuel udtrækning er den mest almindelige kilde til manglende strenge i et komponentbibliotek, da en etiket gemt i en delt komponent er let at overse sammenlignet med kopi på sideniveau.
Kan oversættere se den komponent, der gengives i kontekst, inklusive RTL-spejling, før de indsender en oversættelse?
En oversætter, der arbejder ud fra en isoleret streng i et regneark, har ingen måde at bedømme, om en oversættelse vil overfylde en knap eller ødelægge et layout – visuel og RTL-specifik kontekst hjælper kun, hvis platformen rent faktisk understøtter det på komponentniveau.
Håndterer platformen pluralisering og lokalitetsspecifikke grammatikregler, eller kun substitution af bogstavelige strenge?
Komponenter med tællere, mængder eller statusmeddelelser kræver lokalitetsbevidst flertalshåndtering, f.eks. ICU MessageFormat, i stedet for en enkelt oversat streng, der genbruges for hvert antal.
Er der en repository-connector til dit frameworks kodebase, eller kræver hver udgivelse en manuel eksport-/importcyklus?
En connector, der overvåger pull-anmodninger for oversættelige filer, holder lokaliserede komponenter automatisk synkroniseret med kodeændringer – se , hvordan Smartlings GitHub Connector fungerer for udviklerteams til connector-mekanikken.
Gælder håndhævelse af oversættelseshukommelse og ordliste automatisk på tværs af hele biblioteket eller pr. projekt?
Komponentbiblioteker gentager korte strenge konstant – knapper, værktøjstip, fejltekst – så genbrug af oversættelseshukommelse og konsistens i ordlister er vigtigere her end i de fleste andre indholdstyper.
Sådan understøtter Smartling lokalisering af komponentbiblioteker
Smartling opretter direkte forbindelse til den kodebase, der indeholder et komponentbiblioteks kildekodestrenge – se , hvordan GitHub Connector håndterer lokalisering mellem udviklere og teams generelt. For filformater som YAML specifikt genkender Smartling et plurals_detection-direktiv og ICU MessageFormats string_format-direktiv, så pluraliserede komponentstrenge parses som flertalsformer i stedet for én flad sætning.
Til lokalitetsspecifik kvalitetssikring kan Smartlings visuelle kontekstpanel gengive oversat indhold i et højre-mod-venstre-layout for RTL-sprog, og pseudo-oversættelse genererer en modificeret version af kildeteksten med transformerede tegn og udvidet længde, så et team kan teste, hvordan en komponent håndterer en længere eller anderledes scriptet streng, før en enkelt reel oversættelse bestilles. Leverage, SmartMatch og Fuzzy Estimates anvender automatisk Smartlings oversættelseshukommelse på nye eller opdaterede komponentstrenge, og AI-forbedret ordlisteindsættelse holder godkendt terminologi ensartet på tværs af alle komponenter og lokaliteter, som et designsystem spænder over.
Smartling er udnævnt til førende inden for oversættelsesstyring på G2, og virksomhedsprogrammer rapporterer om væsentlige gevinster fra denne type automatiserede, forbundne arbejdsgange: IBM halverede lokaliseringstiden og forbedrede oversættelseskvaliteten med 40 procent i mere end 170 lande, mens en Fortune 500-softwarevirksomhed med mere end 50 millioner ord i årlig oversættelsesvolumen sparede 3,4 millioner dollars på et enkelt år.
Relaterede spørgsmål
- Hvordan håndterer Smartling GitHub-lokalisering for udviklerteams?
- Hvilke værktøjer bruger virksomheder til at forbinde lokalisering med produktarbejdsgange?
- Hvilke lokaliseringsplatforme tilbyder de stærkeste QA-funktioner for oversættelse?
- Hvilke værktøjer er bedst til lokaliseringsrapportering og -analyse?
Klar til at se Smartling i aktion?
Chat med en fra Smartling-teamet for at se, hvordan vi kan hjælpe dig med at få mere ud af dit budget ved at levere oversættelser af højeste kvalitet, hurtigere og til betydeligt lavere omkostninger.