将 TypeScript 模块从本地模块导入到 React 应用程序中

Question

我正在尝试分离我的项目并将逻辑保留为我最终将发布的单独组件。现在，在我这样做之前，我想将其组织如下：

1. 项目中的 TS 脚本库project-a
2. 我使用 create-react-app （使用 Typescript 作为模板）创建了一个单独的 React 应用程序，名为project-b

React 应用程序的 .tsx 组件将从 的project-a.ts 文件中提取。

我已经在project-b 中继续并运行了yarn add ../project-a。这会将库作为依赖项安装。然后，我导入 .ts 文件，我的代码编辑器能够很好地查看所有类型和定义。伟大的！

当我运行应用程序时，Webpack 抱怨：

./node_modules/project-a/src/calc.ts 2:7
Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
> export enum Position {
|   Inner = 0,
|   Outer = 1

我不明白为什么它不将文件解析为 .ts。整个 React 应用程序是使用 TypeScript 设置的，我什至在本地导入了一些 .ts 文件。我是否需要告诉 Webpack 处理从此模块作为 Typescript 源导入的文件（假设 Webpack 如果不需要的话不会尝试解析它们）？

React 模板没有设置 webpack（我假设它使用隐藏的默认值），但我可以调整 tsconfig.json 文件。我将模块直接路径添加到包含数组中。这似乎也没有多大作用。

基本上：我怎样才能通过上述错误并继续从主应用程序中的依赖模块导入 TypeScript 文件？

Answer 1

您必须编译project-a为 javascript 并发出类型文件，因为从包导入必须是 Javascript。

从外部包获取的类型信息是通过.d.ts包旁边的文件传递的。

当您导入其他包时，您始终导入 Javascript 文件。即使在本地，Webpack 也不会为您编译打字稿，而是由捆绑期间的加载程序编译。因此，一旦在浏览器中运行，就都是 Javascript 了。但是您正在尝试在运行时导入 Typescript 文件。