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

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

"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')]
}
]