问题

在客户要求下要将项目中中英文切换，英文要以英文单词首字母大写为准。可是前期开发人员并没有规范。多以这种：

 "headerFontColor":"top font MAV Mac /MAC(V)",

存在，可是emmmmm...一个一个修改，必si。

方法 1

去看了vue-i18n 官网，找到formatter可实现。实践：

// 实现自定义格式
class CustomFormatter {
    constructor (options) {

    }
   //  英文处理
    upperCase(text) {
        return text.replace(/\b([\w|']+)\b/g, function(result) {
            let lowText = result.toLowerCase()
            return lowText.replace(lowText.charAt(0), lowText.charAt(0).toUpperCase());
        });
    }
    interpolate (message, values) {
        // 返回插值数组
        return [ this.upperCase(message)]
    }
}
const i18n = new VueI18n({
    locale:utils.getCookie('language')?utils.getCookie('language'):'zh',
    formatter: new CustomFormatter(),
    messages:messages,
});

方法 2

使用loader。

创建文件夹rules 管理自定义的loader
在rules创建文件夹diy-loader,并在diy-loader文件夹创建index.js(编写处理文件代码)

// 获取loader 中Options 配置
let loaderUtil = require('loader-utils')

function upperCase(text) {
  return text.replace(/\b([\w|']+)\b/g, function(result) {
            let lowText = result.toLowerCase()
      return lowText.replace(lowText.charAt(0), lowText.charAt(0).toUpperCase());
  });
}

function upperCaseByJson(jsonData) {
    let keys = Object.keys(jsonData)
    for (let item in jsonData) {
        if (jsonData[item] instanceof  Object) {
            upperCaseByJson(jsonData[item])
        } else  {
            jsonData[item] =  upperCase(jsonData[item])
        }
    }
}

module.exports = function (source) {
    const  options = loaderUtil.getOptions(this) || {}
    let  sourceJson, startVal,startTime = new Date().getTime()
    console.log('自定义loader source', startTime)
	// loader 中test 校验的文件 数据（source）
    if (source && source.split('=').length >= 2 ) {
        startVal =  source.split('=')[0]
        sourceJson = JSON.parse(source.split('=')[1])
        upperCaseByJson(sourceJson)
    }
    console.log('自定义loader source',new Date().getTime() - startTime )
    source =  startVal + '=' + JSON.stringify(sourceJson)
    return   source
}

3.在 webpack.config.js 加载自定义loader


resolveLoader: {
        modules: [
            path.resolve(__dirname,'./rules'),
            'node_modules' // npm 加载的loader
        ]
    },
    module: { // 处理对应模块
        rules: [
            // 处理自定义
            {
                 test: /\.en\.json$/,
                 loader:'diy-loader',
                 include: [path.resolve(__dirname,'./src/assets/i18n')]
             }
            ]

测试。

webpack ——自定义Loader，将i18n英文单词首字母转大写

问题

方法 1

方法 2