javascript - 无法识别 ES5 导出函数

Question

我得到了这个 math.js:

const sum = (a, b) => a + b
const mul = (a, b) => a * b

export default { sum, mul }

然后在 math.test.js 中:

const { sum, mul } = require('./math')

test('Adding 1 + 1 equals 2', () => {
  expect(sum(1, 1)).toBe(2)
})

test('Multiplying 1 * 1 equals 1', () => {
  expect(mul(1, 1)).toBe(1)
})

我从玩笑中得到了这个错误:

? Adding 1 + 1 equals 2

  TypeError: sum is not a function

    5 | })
    6 | test('Adding 1 + 1 equals 2', () => {
  > 7 |   expect(sum(1, 1)).toBe(2)
    8 | })
    9 |

如果我在测试文件中导入这些函数，jest 运行良好。 无法理解在 ES5 中获取外部函数的正确方法。

Answer 1

有两个问题:

1. 这一行可能并不像您认为的那样:

   export default { sum, mul }
   

2. 您正在混合 native 模块语法(export/import，通常称为 ECMA 的“ESM”脚本 Mmodules) 与 CommonJS 语法 (require)。使用 import 以 ESM 语法导入。

export default { sum, mul } 导出一个默认导出，它是一个具有属性 sum 和 mul 的对象(这将是一个奇怪的与 ESM 有关)。如果你真的想这样做，那很好，但这通常不是最佳做法。您不能在导入时解构，但可以在导入后解构对象:

// BUT YOU PROBABLY DON'T WANT TO DO THIS, KEEP READING
import math from "./math"; // Imports that default export
cosnt {sum, mul} = math;   // Destructures it into constants

但是，通常您会使用命名导出，无论是在您进行时:

export const sum = (a, b) => a + b
export const mul = (a, b) => a * b

...或一次全部(风格决定):

const sum = (a, b) => a + b
const mul = (a, b) => a * b

export { sum, mul };

要import 命名的exports，你会像以前那样使用语法，但是使用import，而不是require:

import { sum, mul } from "./math";

这不是解构，尽管它看起来很相似。它缺少解构的几个特性(嵌套、默认值……)。

或者，您可以导入一个命名空间对象:

import * as math from "./math";

上面会有 sum 和 mul 属性(这就是为什么你通常不使用 JavaScript 原生模块导出对象；任何真正想要的东西都可以得到命名空间对象)。