批量引入实现前端工程自动化

前言

因为项目需要国际化，而我们是通过功能进行json文件的分类，所以功能模块多，意味着相应的json文件会多，它们是需要引入文件才会生效的，所以如果一个一个引入的话，会非常不便利。所以这里就使用一个 webpack的api，require.context函数

正文

require.context

是一个webpack的api函数，可以实现对某一类文件的自动化引入，主要是通过遍历相关文件类型进行批量的注入，这是一个自动化的过程，不再需要通过impot导入，下面是项目的例子，国际化

大家可以看到语言下有许多子模块，子模块下有分许多json文件，如果一个一个导入的话，特别麻烦，而且如果后期继续加入，就更不用说了。

使用介绍

官网的案例
require.context('./test', false, /.test.js$/)
本人项目
require.context('./locales', true, /\.json$/) 
函数有三个参数:
        1.文件夹的路径
        2.是否遍历子目录
        3.匹配文件的正则
案例的意思是遍历test文件夹下所以以.test.js结尾的文件，不包含子目录
项目的意思是遍历locales文件夹下，包括子目录下所以以json格式结尾的文件

我们可以用一个遍历来接收这个函数，在通过object.key(),可以获取我们遍历的文件，以数组的形式 ，下面会以我的项目案例给大家展示

const ctx = require.context('./locales', true, /\.json$/)
console.log(ctx.keys())  //数组
const map = {}   //存放数据

console.log(ctx)      //是一个函数，接收一个参数id,返回对象

接下来就遍历数组，同时大家也可以分别去打印下来的数据，会更清晰，这里不一一展示了

for (const key of ctx.keys()) {
  map[key] = ctx(key)    // 数据将以key/value的格式存放在对象里，如下图
  console.log(key)   //文件路径
  console.log(ctx(key))    // 文件里的对象，其包含了全部数据
}
console.log(map)  // 对象里还有许多对象

自此其实我们就获取了所有的文件，现在主要是将获取到文件注入到相应的文件夹中

上面说了key代表我们的路径，而路径我们是自己定义的，会做相应的语言区别,如下图 ，分了三种语言，其实后面和前面道理相同

const en = {}
const cn = {}
const hk = {}
之前是分到所有文件，现在是分到各自的文件夹，同样创建三个对象接收

for (const key in map) {    //遍历对象
  console.log(key);   //打印的是对象的键，就是路径
  if (key.indexOf('/en/') !== -1) {     // 通过前面创建不同文件夹名，路径也是有不同
    for (const skey in map[key]) {
      console.log(skey)    // 文件里对象的键
      en[skey] = map[key][skey]    //将属于en的值存进en中
    }
    console.log(en); //下面其他同理
  } else if (key.indexOf('/zh-CN/') !== -1) {
    for (const skey in map[key]) {
      cn[skey] = map[key][skey]
    }
  } else {
    for (const skey in map[key]) {
      hk[skey] = map[key][skey]
    }
  }
}

最后将其使用，导入导出

Vue.use(VueI18n)
const messages = {
  'en-us': {
    ...en
  },
  'zh-cn': {
    ...cn
  },
  'zh-hk': {
    ...hk
  }
}
const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || 'zh-cn',
  messages
})

export default i18n