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 |

如果我将这些功能导入测试文件，则说明运行良好。 无法理解在ES5中采用外部功能的正确方法。

Answer 1

有两个问题：

1. 这行可能不执行您认为的操作：

    export default { sum, mul } 

2. 你混合本机模块的语法（ export / import与CommonJS的语法（通常称为“ESM”对于E CMA 小号 CRIPT 中号 odules） 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 ，但require ：

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

尽管看起来很相似，但这并不是在破坏性。 它缺少解构的几个功能（嵌套，默认值等）。

或者，您可以导入名称空间对象 ：

import * as math from "./math";

这将具有sum和mul属性（这就是为什么您通常不使用JavaScript本机模块导出对象；真正想要一个对象的任何人都可以获取名称空间对象的原因）。

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

更换

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

与

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

Answer 4

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