Babel插件

全局安装@voerkai18n/babel插件用来进行自动导入t函数和自动文本映射。

安装

> npm install -g @voerkai18n/babel
> yarn global add @voerkai18n/babel
> pnpm add -g @voerkai18n/babel

启用插件

使用方法如下：

• 在babel.config.js中配置插件

const i18nPlugin =  require("@voerkai18n/babel")
module.expors = {
    plugins: [
        [
            i18nPlugin,
            {
                // 可选，指定语言文件存放的目录，即保存编译后的语言文件的文件夹
                // 可以指定相对路径，也可以指定绝对路径
                // location:"",
                autoImport:"#/languages"  
            }            
        ]
    ]
}

这样，当在进行babel转码时，就会自动在js源码文件中导入t翻译函数。

插件参数

插件支持以下参数:

• location

  配置langauges文件夹位置，默认会使用当前文件夹下的languages文件。

  因此，如果你的babel.config.js在项目根文件夹，而languages文件夹位于src/languages，则可以将location="src/languages"，这样插件会自动从该文件夹读取需要的数据。

• autoImport

  用来配置导入的路径。比如 autoImport="#/languages" ，则当在babel转码时，如果插件检测到t函数的存在并没有导入，就会自动在该源码中自动导入import { t } from "#/languages"

  配置autoImport时需要注意的是，为了提供一致的导入路径，视所使用的打包工具或转码插件，如webpack、rollup等。比如使用babel-plugin-module-resolver

  module.expors = {
      plugins: [
          [
              "module-resolver",
              {
                  root:"./",
  				alias:{
                      "languages":"./src/languages"
                  }
              }            
          ]
      ]
  }

  这样配置autoImport="languages"，则自动导入import { t } from "languages"。

  如webpack、rollup等打包工具也有类似的插件可以实现别名等转换，其目的就是让@voerkai18n/babel插件能自动导入固定路径，而不是各种复杂的相对路径。