npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

liupangustest

v1.0.0

Published

tuya i18n for internationalization

Downloads

3

Readme

i18n

功能

  • 支持浏览器端和node端的多语言
  • 支持多种语言查询和转换
  • 待写

开始

安装

npm install @tuya-fe/i18n

初始化

init方法进行初始化

例子:

import __ from '@tuya-fe/i18n'

__.init({
    defaultLocale: 'en', // 可选,系统会默认判断语言,若判断失效,显示该设置的默认语言,不设置默认en
    <!-- req,  // node环境必选,用于服务端 HTTP response object of server -->
    headers: '', // node环境下req的headers
    localeUrl, // 必选,查询多语言后台接口URL
}).then(() => {
    // doSomethingOthers
})

使用

1)基本的使用

一、查询

推荐:get方法

例子:

__.get(key)
{
    'TITLE': 涂鸦智能
}
render () {
    return (
        <div>{ __.get['TITLE'] }</div> // 涂鸦智能
    )
}

为了保持兼容旧写法,也可以(不推荐):

__.title

二、切换语言

switch(locale)方法

例子:locale为语系唯一标识,比如 'zh','en'

__.switch('en')

2)包含变量

如下例子,包含变量name,在get方法中注入变量name的值tuya

{'key': 'i love {name}' }
__.get('key', { name: 'tuya' })
// i love tuya

3) 包含复数和数字分隔符等

采用业界通用的ICU Message syntax语法

如下例子,变量name分别为0,1和1000000

{ "key": "I have {num, plural, =0 {no books.} =1 {one photo.} other {# books.}}" }
__.get('key', {num:0}); // "I have no books."
__.get('key', {num:1}); // "I have one book."
__.get('key', {num:1000000}); // "I have 1,000,000 books."

3)货币

语法: { name, type, format }

format可选,若format省略,type为number,则会返回格式化后的数字分隔符

若format是该货币的一种,则会返回相关联的货币格式

例子,变量name为car,type为number以及format为USD

{ "key": "My car is { car, number, USD }" }
__.get('key', { car:123456.78 }); // My car is $123,456.78

方案

语言包缺失提示

1)语言包为空,控制台提示

2)__.get(key),若指定key不存在时,控制台提示

定位语言

  • 1、依据cookie查找语言,若为空,执行第2步
  • 2、根据请求头accept-language权值大小选择语言,若无匹配,显示默认语言
  • 3、待补充

浏览器端缓存策略

采用localForage进行缓存当前环境的多语言

  • 异步存储
  • 离线存储
  • 优雅降级
  • 存储多种类型

localForage 有一个优雅降级策略,若浏览器不支持 IndexedDB 或 WebSQL,则使用 localStorage。

node端存储

redis

语言包发布、变更等处理

根据接口返回的数据版本标识,更新前端数据

缓存被清空、语言包为空和key出错等异常场景

异常场景处理

迁移问题

待确认

遗留问题

待定