1

我正在构建一个 ReactJS 和 TypeScript 项目，并希望使用我将在我的 Web 应用程序和 API 服务器之间共享的模块。

我为我的网络应用程序使用了带有 ts-scripts 的 create-react-app。我在没有使用入门项目的情况下制作了我的共享模块，因为它非常简单。

我的 Web 应用程序使用 NPM 的本地包功能引用我的共享模块，命令npm install --save <path/to/shared/package>

当我npm run start为我的反应应用程序做时，我得到了错误

TypeError: __WEBPACK_IMPORTED_MODULE_3_validation_shared__.ValidEmail is not a constructor

validation_shared是我缺乏想象力的模块名称。

导致错误的 TypeScript 是

const valid_email = new ValidEmail("john.doe@example.com");

我可以在我的配置或设置中更改什么以使其正常工作吗？我很想使用 typescript 和 ts-node，并且有共享模块。

编辑 - 为 ValidEmail 和该文件中的其他函数添加代码。

export function validate(email_address: string): boolean {
    return email_address.indexOf("@") !== -1;
}

export class ValidEmail {

    public email_address: string;

    constructor(email_address: string) {
        if(validate(email_address)) {
            this.email_address = email_address;
        } else {
            throw new TypeError("Invalid value for email address param, it must contains an @ symbol.");
        }
    }
}

经过更多调查后，看起来无论 webpack/bundling 过程 create-react-app 使用的都是将导入定义与前端代码捆绑在一起，而不是添加实际的类和函数定义。

我通过检查加载到 chrome 中的生成代码并查找不存在的实际类名“ValidEmail”来发现这一点。

编辑＃2 - console.log 输出 我将我的 App.tsx 更新为此

import { HeaderBar, IHeaderBarProps } from "./components/headerbar";

import * as vs from "validate-shared";

class App extends React.Component {
  public render() {

    console.log(vs);

console.log(vs) 的结果是： /static/media/index.9d88054a.ts

当我查看文件的内容时，我只看到

export * from "./ValidEmail";
export * from "./User";

这是有道理的，因为它是该模块的 index.ts 文件的内容。我在任何地方都找不到文件 ValidEmail 或 User 的“肉”。看起来这些类的实际代码不包含在任何地方。

4

0 回答 0