通过热重载导入本地 TypeScript React 包作为依赖项

Question

我目前遇到以下问题，我想使用本地react包（my-react-package）作为另一个react应用程序（）中的依赖项my-react-app，两者都是用打字稿编写的。

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 my-react-app\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 my-react-package\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n

\n

my-react-package我正在通过"my-react-package": "file:../my-react-package",in导入my-react-app/package.json。

\n

当使用它dist的构建输出时my-react-package，它工作得很好，但是每次我进行更改时，我都需要再次构建它，这对于开发来说非常耗时。

\n

这就是为什么我尝试my-react-package/src直接使用反应代码。但是当 my-react-package/package.json从"main": "dist/index.js",更改为 时"main": "src/index.ts"，导入它会导致以下错误my-react-app：

\n

./node_modules/my-react-package/src/hooks/state/session.ts 34:31\nModule parse failed: Unexpected token (34:31)\nYou 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\n| import { useState, Dispatch, SetStateAction } from \'react\'\n| \n> export function useSessionState<_, S>(key: string, initialState: S): [S, Dispatch<SetStateAction<S>>] {\n|   try {\n|     const storedState = sessionStorage.getItem(key)\n

\n

我认为这个错误与 webpack 如何处理 typescript 依赖关系有关。由于我使用的是create-react-app，所以我想避免弄乱文件webpack.config.js。

\n

我还想避免将其my-react-package作为文件夹，因为我计划将来从多个其他反应应用程序my-react-app/src导入。my-react-package

\n

有没有办法，my-react-package可以保留作为自己的包，同时在本地导入它时进行热重载工作？

\n

Answer 1

如果你真的不想每次都重建，你可以直接访问文件，如下所示：

import { thing } from "../my-react-package/src/thing"

但是，您可能想要的是每次进行更改时自动重新编译。

您的问题没有指定是否my-react-package使用 webpack，因此如果没有，您可以通过以下方式查看正在保存的文件并自动重新编译：

tsc -w

如果您仅使用原始 webpack ，您可以像这样my-react-package编辑：webpack.config.js

module.exports = {
  //...
  watch: true
};

这将告诉 webpack 自动重建。

或者，如果您使用create-react-appfor my-react-package，则可以安装npm-watch：

npm i npm-watch

然后编辑你的package.json：

{
  // ...
  "devDependencies": {
    "npm-watch": "^0.1.8",
    "react-scripts": "0.9.5",
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "watch": "npm-watch"
  },
  "watch": {
    "build": "src/"
  }
}

希望这可以帮助。