Webpack Loader

voerkai18n-loader是一个标准的webpack loader用来实现在webpack下实现根据idMap文件自动映射翻译内容和自动导入t函数。主要功能：

• 自动读取当前工程languages/idMap.(js|ts)文件，将t("xxxxx")的待翻译内容转换为t("1")、t("2")、t("<数字>")形式，从而消除源码中的冗余文本。
• 根据配置,在(js|ts|tsx|jsx)等文件中从languages自动导入t函数。

安装

pnpm add -D voerkai18n-loader
npm install -D voerkai18n-loader
yarn add -D voerkai18n-loader

React项目中使用

voerkai18n-loader是一个标准的webpack loader,在任意使用webpack作为构建工具的环境下均可以使用。 关于如何安装配置webpack loader请参阅webpack的相关文档。

下面我们以使用Create React App创建的React应用为例介绍如何安装配置voerkai18n-loader。

第一步: 创建React应用

npx create-react-app myapp

第二步: 修改webpack配置

要修改使用Create React App创建的React应用的webpack配置有两种方法:

• 第一种：修改react-scripts eject命令输出的配置文件

执行react-scripts eject命令，该命令会在当前工程的config文件下生成webpack.config.js。 打开config/webpack.config.js，在module.rules中添加一项：

// config/webpack.config.js

{
    module:{
        rules:[
            {
                test: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/],
                loader:"voerkai18n-loader",
                include: paths.appSrc,
                enforce:'pre',
            }
            //...其他规则 
        ]
    }
}

也可以指定voerkai18n-loader配置参数。

// config/webpack.config.js
{
    module:{
        rules:[
            {
                test: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/],
                use:[
                    {
                        loader:"voerkai18n-loader",
                        // 可选的配置参数
                        options: {
                           autoImport:false,            // 是否自动导入t函数
                           debug:false,                 // 输出一些调试信息
                        }
                    }
                ],		                    
                include: paths.appSrc,                  // 只转换
                enforce:'pre',
            }
            //...其他规则 
        ]
    }
}

• 第二种：使用@craco/craco配置

react-scripts eject命令生成的config/webpack.config.js比较复杂，新手容易修改出问题来，这时可以使用@craco/craco。

@craco/craco是一个第三方库，可以在React应用不进行eject的情况下更加方便地修改webpack配置。

按照@craco/craco配置好React应用后，修改craco.config.js，如下：

module.exports = {
	webpack: {
		configure:(config, { env, paths })=>{
		    config.module.rules.push(
		                {
		                    test: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/],
                            use:[
                                {
                                    loader:"voerkai18n-loader",
                                    options: {
                                        autoImport:true,
                                        debug:true
                                    }
                                }
                            ],		                    
                            include: paths.appSrc,
		                    enforce:'pre',
		            }
		    )
		    return config
		} 
    }
}

Vue2项目中使用

Vue2项目一般有两种构建方式，一种是使用vue-cli/webpack构建的，另一种是使用vite构建的。

一般较早的Vue2项目中会使用webpack构建的.

webpack构建

在Vue2项目中使用voerkai18n-loader需要修改vue.config.js文件，如下：

// vue.config.js
module.exports = {
    configureWebpack: {
        module:{
            rules:[
                {
                    test: [/^$/, /\.(js|vue)$/],
                    use:[
                        {
                            loader:"voerkai18n-loader",
                            // 可选的配置参数
                            options: {
                               autoImport:false,            // 是否自动导入t函数
                               debug:true,                 // 输出一些调试信息
                            }
                        }
                    ],                            
                    include: path.join(__dirname, 'src'),                  
                    enforce:'pre',
                } 
            ]
        }
      }
}

vite构建

如果是使用vite构建的Vue2项目，则需要使用@voerkai18n/vite插件,详见这里。

配置参数

voerkai18n-loader支持两个配置参数：

• autoImport

是否自动导入t函数，当在使用js开发时，可以通过配置autoImport=true来自动从当前应用的languages自动导入t函数。 如果您的是使用typescript开发，则不建议开启此功能，在此如果不导入t函数，会导致类型错误。

• debug

在控制台输出一些调试信息。