是否可以使用Webpack评估和编译JS块？

Question

我有一个我正在使用IIFE创建的对象，以使其更易于管理。但是，值是静态的，对象应始终相同。因此，为了避免不必要的处理，我希望捆绑文件包含实际对象而不是函数表达式。这可能吗？如果没有，我有更好的方法吗？

来源JS：

const keyMap = (function () {
    const keys = {
        tab: 9,
        up: 38,
        down: 40,
        left: 37,
        right: 39,
        enter: 13,
        space: 32,
        ' ': 32,
        shift: 16,
        ctrl: 17,
        alt: 18,
        win: 91,
        backspace: 8,
        capsLock: 20,
        ',': 188,
        '.': 190,
        '/': 191,
        '\\': 220,
        esc: 27
    };

    const alph = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

    for (let i = 0; i < alph.length; i++) {
        keys[alph[i]] = i + 97;
        keys[alph[i].toUpperCase()] = i + 65;
    }

    for (let i = 0; i <= 9; i++) {
        keys[i] = i + 48;
    }

    for (let i = 0; i <= 9; i++) {
        keys[`pad${i}`] = i + 96;
    }

    return keys;
})();

预期结果：

const keyMap = {tab: 9, up: 38, ..., a: 97, b:98, ... }

Answer 1

只需使用IIFE块中的计算输出作为keyMap对象

const keyMap = {
  0: 48,
  1: 49,
  2: 50,
  3: 51,
  4: 52,
  5: 53,
  6: 54,
  7: 55,
  8: 56,
  9: 57,
  tab: 9,
  up: 38,
  down: 40,
  left: 37,
  right: 39,
  enter: 13,
  space: 32,
  '': 32,
  shift: 16,
  ctrl: 17,
  alt: 18,
  win: 91,
  backspace: 8,
  capsLock: 20,
  ',': 188,
  '.': 190,
  '/': 191,
  '\\': 220,
  esc: 27,
  a: 97,
  A: 65,
  b: 98,
  B: 66,
  c: 99,
  C: 67,
  d: 100,
  D: 68,
  e: 101,
  E: 69,
  f: 102,
  F: 70,
  g: 103,
  G: 71,
  h: 104,
  H: 72,
  i: 105,
  I: 73,
  j: 106,
  J: 74,
  k: 107,
  K: 75,
  l: 108,
  L: 76,
  m: 109,
  M: 77,
  n: 110,
  N: 78,
  o: 111,
  O: 79,
  p: 112,
  P: 80,
  q: 113,
  Q: 81,
  r: 114,
  R: 82,
  s: 115,
  S: 83,
  t: 116,
  T: 84,
  u: 117,
  U: 85,
  v: 118,
  V: 86,
  w: 119,
  W: 87,
  x: 120,
  X: 88,
  y: 121,
  Y: 89,
  z: 122,
  Z: 90,
  pad0: 96,
  pad1: 97,
  pad2: 98,
  pad3: 99,
  pad4: 100,
  pad5: 101,
  pad6: 102,
  pad7: 103,
  pad8: 104,
  pad9: 105,
};

Answer 2

我会使用json文件而不是生成的对象。仅仅因为它是一个常数，看起来你的捆绑包依赖于它。 然后我会在我的入口文件的开头导入/要求json，然后将其注入到app函数中。 由于require / import是同步处理的，因此bundle会在启动应用程序之前导入json