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

i18n-vue-cli

v0.1.7

Published

i18n environment Chinese extract and input (for waytous)

Downloads

4

Readme

目前工具的限制

  1. 目前脚本 仅支持 .vue 文件和 .js 文件 中的中文提取与写入,如果涉及其他文件夹下的内容,可根据脚本内容进行修改对应需要处理的文件内容
  2. 目前支持 vue 项目
  3. 写入的脚本需 本地 node 环境版本不能低于 10.12.0

工具依赖包的安装

  1. 安装工具依赖包
$ npm i -g i18n-vue-cli

目前该工具属于全局指令操作,所以需要全局安装

项目中中文的提取

参考:

i18n-vue-cli getlang src/view -f system.json -d system -e systemTrans

src/view 为文件入口,相对于命令行位置src下view文件下 -f system.json 写入system.json -d system 为src/view/system目录 -e systemTrans systemTrans为额外参数

从项目中的 .vue 文件 和 .js 文件中收集中文字符,并将收集到的字符存储到一个键值对的 .json 文件中 同时会将收集到的数据转为中文key的键值,写入根目录下src/locale/lang/en_US 和 src/locale/lang/zh_CN 目录下,以额外参数命名的js文件 如systemTrans.js

//src/locale/lang/zh_CN
 systemTrans: {
    新增: 新增,
 }
//src/locale/lang/en_US 英文目录会自动调用百度翻译进行简易翻译
 systemTrans: {
    新增: 'add',
 }

项目中中文的替换

将提取的中文文件(.json 文件)中的中文以 i18n (如 $tt('a.b'))的形式替换到项目对应的中文位置

  1. 执行 writeLang 将中文以 i18n 的模式写入文件(仅支持 components 与 pages 里的 .vue 文件和 .js 文件)
$ i18n-vue-cli writelang <srcDist> -f <filename> -d <dir> -i <ignoredir> -e<额外参数>
// 例如 i18n-vue-cli writelang src3 -f system.json -d system -e systemTrans
$ i18n-vue-cli writelang <srcDist> -f <filename> -d <dir> -i <ignoredir> -e<额外参数>
  • srcDist 为复制 src 出来的文件夹名
  • filename 为生成的语言文件的文件名,必须为json格式, 默认为zh_cn.json
  • dir 为要替换成 $t 的文件目录, 默认为 pages, components
  • ignoredir 为 dir 目录下被忽略的文件目录

注:
1、非 .vue 文件需要引用 i18n 才能使用
2、dir 可以是src下的任意文件目录

执行以上脚本后会在 src 同级目录生成 srcDist 文件夹,文件夹内仅包含 components 与 pages 文件夹下的 .vue 文件和 .js 文件

  1. 将 srcDist 文件夹内容替换到 src 文件夹中,覆盖重复的文件

  2. 在src/locale/lang/zh_CN和src/locale/lang/en_US目录下的index.js文件中引入生成的语言文件

  3. 在js文件中引入$tt import { tryTranslate as $tt } from "@/locale/utils";

//  /locale/utils 采用中文title兜底策略
import i18n from "@/locale/index";
/**
*i18n翻译
*/
export function tryTranslate(title, key) {
let realyKey = `${key}['${title}']`;
// i18n.t(`${key}`)[title]  这种形式也可以
if (i18n.te(realyKey)) return i18n.t(realyKey);
return title;
}
  1. 运行项目,全局遍历一下是否有遗漏

注: 以上基于项目中已加入 i18n ,并且已做好配置。