使用 ~ 而不是 './' 导入组件答案

【问题标题】：import components with ~ instead of './'使用 ~ 而不是 './' 导入组件
【发布时间】：2020-09-29 22:00:04
【问题描述】：

在我的 pages/screens 文件夹中，我创建了一个索引文件并执行了如下操作：

export * from './UserPage';
export * from './users/SearchPage';

所以现在，当我想从我的 App.tsx 文件中的这些页面导入组件时，我可以

import { SearchPage, NewPage } from './pages';

而不是输入完整的相对路径。但是，我想使用类似的东西

import { SearchPage, NewPage } from '~/pages';

为此，我将其添加到我的 tsconfig.json 文件中，因为它似乎在另一个项目中有效，但在这里对我不起作用：

    "paths": {
      "~/*": ["./*"],
      "~": ["./"]
    },

我还能如何更改我的导入格式？

编辑： tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "baseUrl": "./src",
    "paths": {
      "@modules/*": ["modules/*"],
      "@config/*": ["config/*"],
      "@shared/*": ["shared/*"]
    },
  },
  "include": [
    "src"
  ]
}

【问题讨论】：

为什么你的主目录中有包文件？为什么要将主目录的内容公开给 HTTP 请求？您的网络服务器是否在您的个人用户下运行？这是一件非常奇怪的事情......
这并不是一件奇怪的事情。波浪号通常在导入路径中用作项目根目录（或根源目录）的简写。

标签： javascript reactjs typescript react-native webpack

【解决方案1】：

仔细检查 tsconfig.json 中 baseUrl 的值。

您加载的与这些路径匹配的任何模块都将相对于 baseUrl 加载。

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

【讨论】：

原来我之前没有使用 baseUrl。我将它与路径一起添加到我的 tsconfig 中。现在知道如何/在哪里指定~？现在，如果我在 App.tsx 中导入文件，我可以这样做 import { HomePage } from 'pages'; 但不能使用 ~ 请在更新后的 qs 中查看我的文件。

【解决方案2】：

事实上，你使用带有 typescript 的 webpack，你需要通知 webpack 你正在使用路径功能。

你可以使用tsconfig-paths-webpack-plugin来做到这一点

【讨论】：

【解决方案3】：

您可以在tsconfig.json 中定义。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "strictPropertyInitialization": false,
    "baseUrl": "./src",
    "allowJs": true,
    "paths": {
      "@modules/*": ["modules/*"],
      "@config/*": ["config/*"],
      "@shared/*": ["shared/*"]
    },
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

在paths 与您联系tsconfig.json，您可以执行类似的操作

"paths": {
    "@pages/*": ["pages"],
}

但是你需要使用import {...} from '@pages'；

【讨论】：

你想使用import { HomePage } from 'pages'吗？
我已经在这样做了。我想做一些事情，比如从'~/pages'导入
那么你想从页面中导入所有组件吗？喜欢import {HomePage, Home, SignUp } from '~/pages'？
来自'~/pages' 的页面，来自'~/components' 的组件等。所有这些文件夹都在src 中。现在，我可以从'./pages 和'./components' 导入
我想使用@ 格式会更好。但如果你愿意，试试这个"paths": { "~/*": ["./src/*"], "~": ["./"] },