javascript - 在 create-react-library 库中配置相对于根目录的导入

Question

我正在尝试使用 create-react-library (在后台使用 rollup)设置一个 React 组件库，并移植到我们应用程序的现有组件库，以便我们可以在应用程序之间共享它。我能够创建该库，发布到私有(private) git 注册表，并在其他应用程序中使用它。问题是我必须将所有导入更改为相对导入，这相当烦人，因为我计划移植大量组件、临时文件和实用程序。

包的入口点是src目录。假设我在 src/components/Text.js 中有一个组件，在 src/hoc/auth.js 中有一个 hoc 组件。如果我想将 withAuthentication 从 src/hoc/auth.js 导入到我的文本组件中，我必须像 import { withAuthentication } from "../hoc/auth" 但我希望能够使用现有应用程序中相同的路径进行导入，这样就可以轻松移植组件，例如 import { withAuthentication } from "hoc/auth “

我尝试了很多配置选项，jsconfig.json与我的create-react-app应用程序相同，使用rollup手动构建我的库而不是使用create-react-library，所以我有更多的配置选项，但没有效果。

下面是我的 package.json 以及 jsconfig.json 中的相关部分，任何帮助将不胜感激，我确信我不是唯一遇到此问题的人。

这是 package.json

{
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
  "source": "src/index.js",
  "files": [
    "dist"
  ],
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "build": "microbundle-crl --no-compress --format modern,cjs",
    "start": "microbundle-crl watch --no-compress --format modern,cjs",
    "prepare": "run-s build",
    "test": "run-s test:unit test:lint test:build",
    "test:build": "run-s build",
    "test:lint": "eslint .",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom",
    "predeploy": "cd example && npm install && npm run build",
    "deploy": "gh-pages -d example/build"
  },
  "peerDependencies": {
    "react": "^16.0.0",
    "react-html-parser": "^2.0.2",
    "lodash": "^4.17.19",
    "@material-ui/core": "^4.11.0",
    "react-redux": "^7.1.1",
    "redux": "^4.0.1",
    "redux-localstorage": "^0.4.1",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "react-router-dom": "^5.1.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1",
    "react-svg": "^12.0.0",
    "reselect": "^4.0.0"
  },
  "devDependencies": {
    "microbundle-crl": "^0.13.10",
    "babel-eslint": "^10.0.3",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-standard": "^4.0.1",
    "gh-pages": "^2.2.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.4"
  },
  "dependencies": {
    "node-sass": "^7.0.0"
  }
}

这是 jsconfig:

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

Answer 1

以下链接中的示例也许您应该从 BaseUrl 导航到您的 src 文件，或者如果您的“src”与您的配置位于同一目录中，则它应该只是“.”

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

上面链接的示例:

{
  "compilerOptions": {
    "baseUrl": ".", // This must be specified if "paths" is.
    "paths": {
      "jquery": ["node_modules/jquery/dist/jquery"] // This mapping is relative to "baseUrl"
    }
  }
}