1.1.1 • Published 2 years ago

auto-extract v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

autoi18n

介绍

  1. 自动转换、基于Command或者webpack loader的前端国际化方案
  2. 目的实现前端国际化自动化、自动提取项目中的中文字符生成资源文件
  3. 实现项目侵入式与非侵入式自动国际化,大大提高国际化的开发效率
  4. 目前该库支持vuereact

为什么要写该库

如果一个老项目迭代了多年,有上百个页面,如果忽然说要做国际化:fearful:,这时我估计你心里会万马奔腾。

  1. 手动提取工作量大,还很容易遗漏
  2. 手动做国际化,会改变源码,源码上连个中文标识都没有,这样我们想找到点击按钮都很困难

安装

npm i -D autoi18n-tool

yarn add -D autoi18n-tool

使用

使用方式有两种,第一种:使用Command的形式生成国际化资源和替换国际化的原文件,第二种:使用Command的形式生成国际化资源使用webpack loader的形式无侵入式自动国际化。

纯命令的形式

npx autoi18n init # 初始化自动国际化配置,生成国际化配置文件和生成国际化资源文件
npx autoi18n sync -r # 同步国际化资源和替换原文件国际化字段

执行命令会写入

<div>{{$t('a018615b35588a01')}}</div>

资源文件

// zh-cn.json
{
  "dbefd3ada018615b35588a01e216ae6e": "你好,世界" // key是根据中文生成16的MD5
}
// en-us.js
{
  "dbefd3ada018615b35588a01e216ae6e": "Hello, world" // key是根据中文生成16的MD5
}

webpack loader的形式 不会改变源码

第一步:初始化自动国际化

npx autoi18n init # 初始化自动国际化配置,生成国际化配置文件和生成国际化资源文件
npx autoi18n sync # 同步国际化资源

第二步:配置webpack loader

module.exports = {
  // ... 其他配置
  module:{
    rules:[
      {
          enforce: 'pre', // 此项一定要加上 优先执行的loader
          test: /\.(js|mjs|jsx|ts|tsx|vue)$/,
          use: [
            {
              loader: 'autoi18n',
              options: {}
            }
          ],
          exclude: /node_modules/
        }
    ]
  }
}

HTML

<div>你好,世界</div>

资源文件

// zh-cn.json
{
  "dbefd3ada018615b35588a01e216ae6e": "你好,世界" // key是根据中文生成16的MD5
}
// en-us.js
{
  "dbefd3ada018615b35588a01e216ae6e": "Hello, world" // key是根据中文生成16的MD5
}

页面在中文下展示为

你好世界

在英文下展示为

Hello, world

组成部分

该库分为两部分,一部分是cli,目的是通过命令生成资源文件和替换源文件的国际化字段,另一部分是webpack loader,目的是无侵入式的替换源文件的国际化字段,我们最好在打包测试/上线前执行以下cli命令,生成资源文件,然后拷贝一份资源文件给翻译组进行各国语言的翻译

cli

npx autoi18n init # 初始化自动国际化配置,这个命令会生成国际化配置文件和生成国际化资源文件
npx autoi18n sync # 同步国际化资源文件
npx autoi18n sync -r # 同步国际化资源文件并且会写入源文件 注意:这个命令会修改源码 -r 其实就是 replace 是否替换国际化字段
npx autoi18n -h # 查看使用帮助
npx autoi18n -V # 查看版本

执行npx autoi18n init会在项目根目录生成autoi8n.config.js配置文件

module.exports = {
  /**
   * 需要国际化的语言种类
   */
  language: ['zh-cn', 'en-us'],
  /**
   * 国际化资源文件应用的 模块模式 根据这个模式 使用 module.exports 或者 export default
   * 如果localeFileExt 配置为json时 此配置不起效
   */
  modules: 'es6',
  /**
   * 需要国际化的目录
   */
  entry: ['./src'],
  /**
   * 国际化资源文件输出目录
   */
  localePath: './src/locales',
  /**
   * 国际化文件类型 默认 为 .json文件 支持.js和.json
   */
  localeFileExt: '.json',
  /**
   * 需要处理国际化的文件后缀
   */
  extensions: [],
  /**
   * 需要排除国际化的文件 glob模式数组
   */
  exclude: [],
  /**
   * 要忽略做国际化的方法
   */
  ignoreMethods: ['i18n.t', '$t'],
  /**
   * 要忽略做标签属性
   */
  ignoreTagAttr: ['class', 'style', 'src', 'href', 'width', 'height'],
  /**
   * 国际化对象方法,可以自定义使用方法返回 注意:如果改变国际化方法记得把该方法加到ignoreMethods忽略列表里面
   */
  i18nObjectMethod: 'i18n.t',
  /**
   * 国际化方法简写模式,可以自定使用方法返回 注意:如果改变国际化方法记得把该方法加到ignoreMethods忽略列表里面
   */
  i18nMethod: '$t',
  /**
   * 如果不喜欢又臭又长的key 可以自定义国际化配置文件的key 
   * 默认为 false 不自定义 
   */
  setMessageKey: false,
  /**
   * 国际化要注入到js里面的实例 会在js文件第一行注入
   */
  i18nInstance: "import i18n from '~/i18n'",
  /**
   * 格式化文件配置
   */
  prettier: {
    singleQuote: true,
    trailingComma: 'es5',
    endOfLine: 'lf',
  }
}

webpack loader

在webpack配置文件加入loader配置

module.exports = {
  // ... 其他配置
  module:{
    rules:[
      {
          enforce: 'pre', // 此项一定要加上 优先执行的loader
          test: /\.(js|mjs|jsx|ts|tsx|vue)$/,
          use: [
            {
              loader: 'autoi18n',
              options: {}
            }
          ],
          exclude: /node_modules/
        }
    ]
  }
}

注意

  1. 在vue模板上不支持模板字符串嵌套模板字符串使用,js正则没有平衡组的概念,目前没有很好的处理方案
  2. 每次有新的中文字段加入需要使用npx autoi8n sync进行国际化资源同步,所以建议在打包项目前执行同步操作

项目还在完善中,欢迎大家pr,如果你觉得不错也欢迎给个start :smile::smile::smile:

License

MIT