# sf-i18n-cli

> Scripts for companies, Internationalization.

Latest version **1.0.3** (published 2023-01-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install sf-i18n-cli
pnpm add sf-i18n-cli
yarn add sf-i18n-cli
bun add sf-i18n-cli
```

Provides the command `sf`.

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2023-01-29 |
| First published | 2023-01-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=14 |
| Dependencies | 9 |
| Unpacked size | 36.7 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | caohonghai |
| Maintainers | caohonghai |
| Keywords | vue, i18n |

## Links

- npm: https://www.npmjs.com/package/sf-i18n-cli
- Repository: https://github.com/caohonghai/sf-i18n
- Homepage: https://github.com/caohonghai/sf-i18n#readme
- Issues: https://github.com/caohonghai/sf-i18n/issues
- npm.io page: https://npm.io/package/sf-i18n-cli

## Dependencies (9)

- [chalk](https://npm.io/package/chalk.md) 4.1.2
- [slash](https://npm.io/package/slash.md) 3.0.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [semver](https://npm.io/package/semver.md) ^7.3.8
- [fs-extra](https://npm.io/package/fs-extra.md) ^11.1.0
- [prettier](https://npm.io/package/prettier.md) ^2.8.3
- [commander](https://npm.io/package/commander.md) ^10.0.0
- [typescript](https://npm.io/package/typescript.md) ^4.9.4
- [serialize-javascript](https://npm.io/package/serialize-javascript.md) ^6.0.1

## 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.3 (latest) — 2023-01-29
- 1.0.2 — 2023-01-28
- 1.0.1 — 2023-01-28
- 1.0.0 — 2023-01-28

## README

# sf-i18n-cli

## 介绍

根据公司的项目框架和结构，开发出一个支持批量进行国际化替换的命令行工具。由于工程采用 `vue` 框架，涉及 `script` 标签和 `template` 标签的替换，因此没有采用将 `vue` 文件解析成 `ast` 处理之后重新还原成 `vue sfc`。

此项目工具全部都是采用正则匹配，提取出中文信息，因此对于某些特定写法，正则提取可能不能提取完整。

## 安装

```
npm i sf-i18n-cli -g
```

## 使用

在项目根目录下执行下面命令

```
sf
```

## 指令参数

| 参数              | 类型    | 默认值                 | 描述                                                                                   |
| --------------- | ------- | ---------------------- | -------------------------------------------------------------------------- |
| i, init            | String  | ''                        | 初始化相关配置文件。                                                              |
| r, read          | String  | ''                        | 提取指定模块下的中文。                                                            |
| w, write        | String  | ''                        | 将中文文本替换成 i18n 格式。                                                     |

## 配置参数

```js
module.exports = {
  // 项目的根目录
  root: '/Users/tauysi/Documents/Govern',
  // 项目入口
  entry: 'modules',
  // 项目名称
  project: 'ETL',
  // 具体模块
  modules: 'accessManage',
  // 格式化样式
  prettier: {},
  // 全局语言包路径
  globalLang: ['assets', 'lang', 'zh_CN.json'],
  // 是否加载全局语言包
  loadGlobalLang: true,
  // 是否跳过翻译（此配置未完成）
  skipTranslate: true,
  // 翻译成具体的语言
  locales: ['en-US'],
};
```

## 具体步骤

1. 将 sf-i18n-cli 安装在全局

```
npm i sf-i18n-cli -g
```

2. 进入项目根目录，执行初始化配置的命令

```
sf init
```

3. 修改 `sf-i18n.config.js` 配置文件
4. 执行提取中文命令

```
sf read
```

5. 执行转换命令

```
sf write
```

## 转换效果

转换前
```vue
<template>
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
            <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                    style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="即时配送">
            <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质">
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源">
            <el-radio-group v-model="form.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
            <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            name: '小王'
        }
    },
};
</script>
```
转换后
```vue
<template>
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item :label="$t('accessManage.5eda80b12e5da', '活动名称')">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('accessManage.f1ee87baefa34', '活动区域')">
            <el-select v-model="form.region" :placeholder="$t('accessManage.8ab4944b0189c', '请选择活动区域')">
                <el-option :label="$t('accessManage.68e776277ab0b', '区域一')" value="shanghai"></el-option>
                <el-option :label="$t('accessManage.815676c60bcb3', '区域二')" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item :label="$t('accessManage.5a94c1664b6af', '活动时间')">
            <el-col :span="11">
                <el-date-picker type="date" :placeholder="$t('accessManage.645fc77f3a3a5', '选择日期')" v-model="form.date1"
                    style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-time-picker :placeholder="$t('accessManage.6d3c50a7ee938', '选择时间')" v-model="form.date2"
                    style="width: 100%;"></el-time-picker>
            </el-col>
        </el-form-item>
        <el-form-item :label="$t('accessManage.852fd1189884d', '即时配送')">
            <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item :label="$t('accessManage.1efbe1edd028f', '活动性质')">
            <el-checkbox-group v-model="form.type">
                <el-checkbox :label="$t('accessManage.1818d10799583', '餐厅线上活动')" name="type"></el-checkbox>
                <el-checkbox :label="$t('accessManage.5003f6adc18a6', '地推活动')" name="type"></el-checkbox>
                <el-checkbox :label="$t('accessManage.17b678bf5af61', '线下主题活动')" name="type"></el-checkbox>
                <el-checkbox :label="$t('accessManage.80daaf8ede048', '单纯品牌曝光')" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('accessManage.640099e6d80a8', '特殊资源')">
            <el-radio-group v-model="form.resource">
                <el-radio :label="$t('accessManage.710c172baca66', '线上品牌商赞助')"></el-radio>
                <el-radio :label="$t('accessManage.99ea8519cc029', '线下场地免费')"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('accessManage.5b70fd672c36', '活动形式')">
            <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit"> {{ $t('accessManage.8afe003146aff', '立即创建') }} </el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            name: this.$t('accessManage.63209fa442edb', '小王')
        }
    },
};
</script>
```

## 注意事项

- 转换完之后需要检查是否有特殊情况未被正则匹配到的结果。

## 开源许可证

MIT

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