Question

在我的带有typescript的create-react-app应用程序（react-scripts@2.1.1）中遇到了一个非常非常奇怪的错误（目前不知道是否相关）-即使我仍然错误仍然存在将受影响的文件重写为普通的js）：

我有一个非常基本的普通实用程序函数来为redux编写动作类型：

// ...../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'....}

在开发中，它的工作原理几乎与您期望的一样-导入了一些utils，带有类型常量已导出的普通对象；

但是，一旦我使用react-scripts build构建应用程序，我就会在浏览器控制台中看到奇怪的东西：

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

检查已编译并缩小的源代码显示asyncTypes实际上是一个对象-see screenshot。据我了解，在构建时，编译器或最小化器之一决定将函数调用折叠为常量，但是如何以及为什么-除了我之外，尤其是没有从react-scripts弹出...

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

Answer 1

好吧，由于没有人知道任何线索，因此我会回答，因为我 did 解决了build的问题，但是我不确定如何以及为什么：

显示上面的代码

nonlocal

在开发中起作用，而在生产中不；

但代码

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

typesWithPrefix(// ...

确实在开发和生产中都可以使用，尽管事实仅仅是// ....auth/types.ts import * as utils from '../../utils'; utils.typesWithPrefix(// ...文件中的纯函数作为命名的导出和再导出。

我想更深入地挖掘并揭开这个谜，但这需要弹出来，而我真的，除非避免了，否则我不会这么做的。

带打字稿的create-react-app将函数编译为非常奇怪的东西

1 个答案: