[前端]动态加载问题-按条件加载

场景描述

可以根据条件判断是否需要加载某些文件，例如当开发环境的时候我们需要加载 MOCK 文件或者不需要加载 MOCK 文件的情况，可以根据设置的 MOCK 的开关来决定是否需要加载

实践

在使用 webpack 时我们一般通过 require.context 实现动态的加载

export function importMocks() {
  try {
    //require.context("查找目录"，是否查找子文件夹，符合规则的正则表达式) ：
    //require.context 所有参数不能使用变量作为参数，只能直接使用表达式的字面值/(mock)_?([A-Z]\*)?\.ts$/或目录的字面值"../views"
    //require.context 不能在循环中使用
    const fileRequireContext: __WebpackModuleApi.RequireContext = require.context("../views", true, /(mock)*?([A-Z]_)?\.ts$/);
    fileRequireContext.keys().forEach((fileName) => {
      console.debug(fileName);
      // 获取内容
      fileRequireContext(fileName);
    });
  } catch (error) {
    console.debug(error);
  }
}

//根据flag决定是否加载mock文件
const mockData = async (flag) => {
  if (flag) {
    importMocks();
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

以上是wepack方式

export function importMocks() {
  try {
    const fileRequireContext = import.meta.glob('../views/**/mock*.ts')
    Object.keys(fileRequireContext).forEach((fileFullName) => {
      fileRequireContext[fileFullName]();
      import(fileFullName);
    });
  } catch (error) {
    console.debug(error);
  }
}

//根据flag决定是否加载mock文件
const mockData = async (flag) => {
  if (flag) {
    importMocks();
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

以上方式两种方式实现文件的按条件加载完全没有问题，但是 ES6 方式，发现当所谓的flag位置发生变化并且在import旁时判断就会失效，举例说明：

//根据flag决定是否加载mock文件
export function importMocks(flag) {
  try {
    const fileRequireContext: __WebpackModuleApi.RequireContext = require.context("../views", true, /(mock)*?([A-Z]_)?\.ts$/);
    fileRequireContext.keys().forEach((fileName) => {
      console.debug(fileName);
      // 获取内容
      flag?fileRequireContext(fileName):null;
    });
  } catch (error) {
    console.debug(error);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

wepack以上方式仍成功的根据flag决定是否加载mock文件

//根据flag决定是否加载mock文件
export function importMocks(flag) {
   try {
    const fileRequireContext = import.meta.glob('../views/**/mock*.ts')
    //该循环是flag是否失效的分界点
    Object.keys(fileRequireContext).forEach((fileFullName) => {
      fileRequireContext[fileFullName]();
      flag ?import(fileFullName):null;
      // if(flag){
      //   import(fileFullName)
      // }
    });
  } catch (error) {
    console.debug(error);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

而ES通过import方式加载mock文件，当通过三目表达式或if判断是否加载mock文件时flag失效，不论 flag 是什么都会加载mock文件的，思考并测试了一下,发现只要forEach内部判断都会导致flag失效，都会编译import语句实现文件的加载，但是flag判断是发生在forEach之外就不会失效