使用TypeScript时如何在src文件夹中使用本地软件包设置create-react-app？

问题描述

我在我的create-react-app项目中使用TypeScript并使用本地私有软件包。 这些软件包可以在多个应用程序之间共享，并具有自己的存储库。 我想将本地软件包放在getEventListeners文件夹中。

这是我当前的文件夹结构：

src/packages

--create-react-app (root) --node_modules --package.json --src --App.tsx --index.tsx --packages --my-package (sub-repository) --ModuleA.ts --node_modules --package.json 作为本地安装，如下所示：

my-package

这样，我可以像这样从// package.json "dependencies": { "my-package": "file:src/packages/my-package" } 导入模块：

my-package

但是，当// src/App.tsx import ModuleA from 'my-package/ModuleA' 从其自己的ModuleA导入软件包时，会出现编译错误：

node_modules

编译错误：

// src/packages/my-package/package.json
"dependencies": {
  "moment": "^2.27.0"
}

// src/packages/my-package/ModuleA.ts
import moment from 'moment'

我认为该错误是由ESLint引起的，因为它检查了> npm run start Failed to compile. ./src/packages/my-package/node_modules/moment/moment.js Line 9:37: 'define' is not defined no-undef Line 9:50: 'define' is not defined no-undef Search for the keywords to learn more about each error. 中的node_modules。

我不想my-package。我不想私下或公开发布我的软件包。我希望能够更改npm run eject的源代码，并在我的应用程序运行时实时查看更改。

请问有没有办法让它像这样工作？

谢谢您的帮助。

解决方法

尝试绝对进口。通常，使用绝对导入来解决嵌套导入地狱是个好习惯。

在项目根目录的tsconfig.json文件中，添加以下代码：

{
  "compilerOptions": {
    "baseUrl": "src"
  },"include": ["src"]
}

参考： https://create-react-app.dev/docs/importing-a-component/

,

更多谷歌搜索后，我发现了这个问题： https://github.com/facebook/create-react-app/issues/4246

看起来这种方法并不常见，也不被支持。我通过将依赖项从嵌套的node_modules移到根package.json来解决了我的问题。