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

替换

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

与

import { sum, mul } from './math'

Answer 2

使用named export：

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

或

export {sum,mul}

那么

import { sum, mul } from './math'

Answer 3

有两个问题：

1. 这行代码可能不像你想的那样：

   export default { sum, mul }
   

2. 您正在混合本机模块语法（export/import，对于 ECMAScript M，通常称为“ESM” odules) 和 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 命名导出，您可以像以前一样使用语法，但使用import，而不是require：

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

这不是解构，虽然看起来很相似。它缺少几个解构特性（嵌套、默认值……）。

您也可以导入一个命名空间对象：

import * as math from "./math";

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

Answer 4

您可以保留函数声明并将导出更改为export { add, mul } 如上所述，将您的 require 语句更改为 import。