# fostar

> ``` npm i -g fostar // 全局安装 ``` ``` npx fostar // npx安装 （推荐使用） ``` ``` fostar -h // 查看帮助 ```

Latest version **1.0.4** (published 2022-05-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install fostar
pnpm add fostar
yarn add fostar
bun add fostar
```

Provides the command `fostar`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-05-24 |
| First published | 2022-05-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 23 |
| Unpacked size | 30.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | chenjianfang |
| Maintainers | chenjianfang |
| Keywords | i18n, i18next |

## Links

- npm: https://www.npmjs.com/package/fostar
- npm.io page: https://npm.io/package/fostar

## Dependencies (23)

- [glob](https://npm.io/package/glob.md) ^7.2.0
- [chalk](https://npm.io/package/chalk.md) 4.1.2
- [vinyl](https://npm.io/package/vinyl.md) ^2.2.1
- [eslint](https://npm.io/package/eslint.md) ^7.32.0
- [shelljs](https://npm.io/package/shelljs.md) ^0.8.5
- [fs-extra](https://npm.io/package/fs-extra.md) ^10.0.0
- [inquirer](https://npm.io/package/inquirer.md) ^8.2.0
- [prettier](https://npm.io/package/prettier.md) ^2.5.1
- [vinyl-fs](https://npm.io/package/vinyl-fs.md) ^3.0.3
- [commander](https://npm.io/package/commander.md) ^8.3.0
- [gulp-sort](https://npm.io/package/gulp-sort.md) ^2.0.0
- [node-xlsx](https://npm.io/package/node-xlsx.md) ^0.17.2
- [map-stream](https://npm.io/package/map-stream.md) ^0.0.7
- [typescript](https://npm.io/package/typescript.md) ^4.5.4
- [cosmiconfig](https://npm.io/package/cosmiconfig.md) ^7.0.1
- [hash-string](https://npm.io/package/hash-string.md) ^1.0.0
- [@babel/types](https://npm.io/package/@babel/types.md) ^7.16.0
- [module-alias](https://npm.io/package/module-alias.md) ^2.2.2
- [@babel/parser](https://npm.io/package/@babel/parser.md) ^7.16.6
- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.16.5
- [i18next-scanner](https://npm.io/package/i18next-scanner.md) ^3.1.0
- [@babel/generator](https://npm.io/package/@babel/generator.md) ^7.16.5
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.16.7

## Alternatives

- [messageformat](https://npm.io/package/messageformat.md) — 329.7K weekly downloads
- [@mintlify/scraping](https://npm.io/package/@mintlify/scraping.md) — 294.8K weekly downloads
- [@mintlify/previewing](https://npm.io/package/@mintlify/previewing.md) — 209.5K weekly downloads
- [@mintlify/prebuild](https://npm.io/package/@mintlify/prebuild.md) — 209.5K weekly downloads
- [@mintlify/link-rot](https://npm.io/package/@mintlify/link-rot.md) — 206.3K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2022-05-24
- 1.0.3 — 2022-05-24
- 1.0.2 — 2022-05-24
- 1.0.0 — 2022-05-24

## README

### 安装
```
npm i -g fostar // 全局安装
```
```
npx fostar // npx安装 （推荐使用）
```
```
fostar -h // 查看帮助
```

###### 细节较多，熟悉后使用 [1.1](https://github.com/chenjianfang/fostar#11-%E4%BD%BF%E7%94%A8) 、[2.1](https://github.com/chenjianfang/fostar#21-%E4%BD%BF%E7%94%A8) 、[3.1](https://github.com/chenjianfang/fostar#31-%E4%BD%BF%E7%94%A8) 的命令做多语言自动化

## 1 多语言配置初始化 
#### 1.1 使用
```
npx fostar lang-init
```
得到多语言配置文件
```
module.exports = {
  lngs: [
    // 默认包含中文
    {
      lng: 'en',
      name: '英文',
    },
  ],
  ns: {
    // 命名空间
    home: {
      src: ['src/pages'],
    },
  },
  packFunction: '$t', // 用于包裹的函数，必须挂载在全局
  packReg: /[\u4e00-\u9fa5]+/, // 包裹的语言，中文
  extname: ['.js', '.jsx', '.ts', '.tsx'], // 需要检查的后缀文件
  translateFunction: ['t', 'i18n.t', '$t'], // 翻译的函数。默认扫<Trans>组件
};

```
### 2 多语言包裹
#### 2.1 使用
```
npx fostar lang-pack
```
cli会读取上面的配置文件的ns.home.src，根据命名空间的src列表读取源码，然后在AST语法树上匹配到标记词条进行包裹

#### 2.2 包裹的作用
使用i18next多语言插件，都需要使用使用i18next.t('词条key')进行包裹词条，
一般会进行封装成一个全局函数如下：
```
import i18next from 'i18next';
const $t = (key) => {
    i18next.t('词条key')
}
window.$t = $t;
```
这样全局代码就可以使用 $t('词条key') 包裹词条了。

#### 2.3 fostar cli自动化包裹词条的作用
cli是为了给开发提效节省工作量，同时cli读取整个源码更加不会遗漏包裹词条。

#### 2.4 包裹词条的用例（正则匹配配置文件的packReg属性值）
##### 2.4.1 example1 普通字符串:
```
'中文3 中文3' => $t('中文3 中文3')
```
匹配到配置文件的packReg的中文，使用配置文件中的packFunction包裹。

##### 2.4.2 example2 模版字符串，需要映射到[i18next插值](https://www.i18next.com/translation-function/interpolation):
##### 2.4.2.1 模版只有字符串
```
`你好啊` => $t('你好啊')
```
##### 2.4.2.2 模版只有变量
这种情况正常是不要包裹的，只要变量名不是匹配的中文
##### 2.4.2.3 模版有字符串和变量组合
```
const headStr = '1';
const tailStr = '2';
const nums = 4;
const count = '6';

const str = `${headStr}你好 ${nums}个国家, ${count}个苹果${tailStr}`;
```
包裹如下：
```
const str = $t('{{headStr}}你好 {{nums}}个国家, {{count}}个苹果{{tailStr}}', { headStr, nums, count, tailStr });
```
i18next复数是根据count变量判断，只需要变量中有count就可以了
##### 2.4.2.4 模版有字符串、变量、函数调用组合
```
const headStr = '1';
const tailStr = '2';
const nums = 4;
const count = '6';

function sayName(name) {
  return `hello, ${name}`;
}

const str = `${headStr}你好${sayName('lock')} ${nums}个国家, ${count}个苹果${tailStr}`;
```
包裹如下：
```
const str = $t('{{headStr}}你好{{sayName}} {{nums}}个国家, {{count}}个苹果{{tailStr}}', {
  headStr,
  sayName: sayName('lock'),
  nums,
  count,
  tailStr,
});
```
##### 2.4.2.5 模版字符串类型控制！！！
目前模版字符串只支持"普通字符串"、"变量"、"函数调用"三种类型。其中函数调用的参数只支持字符串和变量传参，可能后续会不支持函数调用，慎重在模版里面函数调用。
所以模版字符串优先考虑只有普通字符串和变量。
##### 2.4.3 example3 jsx组件的属性或者jsx内容文本:
```
function Hello() {
  return (
    <div attr="中文1">
        中文2
    </div>
  );
}
```
包裹如下：
```
function Hello() {
  return <div attr={$t('中文1')}>{$t('中文2')}</div>;
}
```
#### 2.5 几种常见场景但不会包裹的情况
##### 2.5.1 词条作为函数调用的参数，如: fun('中文')
##### 2.5.2 作为对象的key或者value，如: const obj = {"你好": "世界"}
##### 2.5.3 作为<Trans>的子节点，如：<Trans><div>中文</div></Trans>
##### 2.5.4 模版字符串除了字符串、变量、函数调用的其他类型，如：`你好${[1,2,3]}啊`，建议作为一个变量提到外面，再在模版中引入

## 3 多语言提取
### 3.1 使用
```
npx fostar lang-collect
```
会扫描ns.home.src的源码中包含配置translateFunction中的包裹函数和Trans组件包裹的词条，如上面的示例$t包裹的词条会按照配置文件中的lngs，提取到根目录的i18n，以json文件后缀。
本地生成不同语言的json文件是为了不同语言单复数问题，如下图：
![image](https://raw.githubusercontent.com/chenjianfang/fostar/master/test/word.jpg)
英文复数新增了一个"_plural"后缀。

## 4 难点

---
_Source: https://npm.io/package/fostar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._