javascript - 使用 typescript 的 create-react-app 将函数编译成非常奇怪的东西

Question

我在使用 typescript 的 create-react-app 应用程序 (react-scripts@2.1.1) 中遇到了一些非常非常奇怪的错误(此时并不知道它是否相关或不-即使我将受影响的文件重写为普通 js，错误仍然存​​在):

我有一个非常基本的普通实用函数来为 redux 组合 Action 类型:

// ...../utils.ts
export type Type = string;
export type Types = {
  [key: string]: Type;
};

export const typeWithPrefix = (prefix: string, type: string): string => {
  return `${prefix}/${type}`;
};

export const typesWithPrefix = (prefix: string, types: Array<string>): Types => {
  return types.reduce((result: Types, type) => {
    result[type] = typeWithPrefix(prefix, type);

    return result;
  }, {});
};

export const asyncTypes = (type: string): Array<string> => {
  return [
    type,
    `${type}_START`,
    `${type}_SUCCESS`,
    `${type}_FAIL`,
    `${type}_FINALLY`
   ];
};

用法:

// ....auth/types.ts
import { typesWithPrefix, asyncTypes } from '../../utils';

export default typesWithPrefix('auth', [
    ...asyncTypes('SIGN_IN'), 
    ...asyncTypes('SIGN_OUT')
]);

// nothing fancy, plain object:
// => {SIGN_IN: 'auth/SIGN_IN', SIGN_IN_START: 'auth/SIGN_IN_START'....}

在开发中，它的工作原理与您预期的差不多——导入了一些实用程序，导出了类型常量的普通对象；

但是当我使用 react-scripts build 构建应用程序时，我在浏览器控制台中看到了奇怪的东西:

Uncaught TypeError: Object(...) is not a function

检查编译和缩小的源代码表明 asyncTypes 实际上是一个对象 - see screenshot .就我在构建时的理解而言，其中一个编译器或 minifies 决定将函数调用折叠为常量，但是如何以及为什么 - 超出我的理解，特别是没有从 react 脚本中弹出......

因此，如果你们中的任何人有任何想法到底发生了什么以及如何避免它 - 我会非常非常高兴听到，因为坦率地说我没有想法..

Answer 1

好吧，既然没有人有任何线索，我会回答关闭这个问题，因为我确实解决了构建问题，但我不确定如何以及为什么:

结果是上面的代码

// ....auth/types.ts
import { typesWithPrefix, asyncTypes } from '../../utils';

typesWithPrefix(// ...

在开发中工作，但不在生产中工作；

但是代码

// ....auth/types.ts
import * as utils from '../../utils';

utils.typesWithPrefix(// ...

确实在开发和生产中都有效，尽管事实上这只是 index.ts 文件中命名导出和再导出的纯函数。

我很想深入挖掘并揭开这个谜团，但这需要弹出，我真的，真的不会不这样做，直到我能避免它......