创建新的 TypeScript React 应用程序时不再支持别名导入

问题描述 投票：0回答：3

我通过此命令使用 

[email protected]
和 
[email protected]
创建了一个新的 React-typescript 应用程序：

npx create-react-app my-app --template typescript

然后我决定像之前多次那样定义别名路径。我在应用程序的根目录中创建了 

tsconfig.paths.json
。

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "components/*": ["/components/*"],
      "routes/*": ["/routes/*"],
      "constants/*": ["/constants/*"]
    }
  }
}

然后我将 

extend
属性添加到 
tsconfig.json
文件中：

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

另外，我安装了 

[email protected]
并创建了 
config-override.js
:

const path = require('path');

module.exports = function override(config) {
    config.resolve = {
        ...config.resolve,
        alias: {
            ...config.alias,
            'components': path.resolve(__dirname, 'src/components/*'),
            'routes': path.resolve(__dirname, 'src/routes/*'),
            'constants': path.resolve(__dirname, 'src/constants/*'),
        }
    }
    return config;
}

所以我重新打开我的 IDE (VSCode) 并运行 

npm start
。我必须提到，在运行启动命令之前，我更改了 
package.json
中的脚本。

{
 .
 .
 .
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }
 .
 .
 .
}

运行start命令后，终端中显示此消息，编译失败：

您的 tsconfig.json 文件进行了以下更改： -compilerOptions.paths 不得设置（不支持别名导入）

*编译失败。

./src/App.tsx 找不到模块：无法解析 .......* 中的“组件”

所以我开始搜索这个问题来解决它。我发现了很多方法，我将在下面提到其中一些：

1. 转到您的 

jsconfig.json
文件并将基本 URL 添加为“.”

"compilerOptions": {
   "baseUrl": ".",
   ...

然后就可以直接从src目录导入东西了

import Myfile from "src/myfile.js"

结果==> 不起作用！

2.这个问题通过别名重新布线解决。安装 

react-app-rewire-alias
然后创建 
config-override.js
文件：

     const {alias, configPaths} = require('react-app-rewire-alias')

     module.exports = function override(config) {
      alias(configPaths())(config)
      return config
     }

结果==> 不起作用！

3.使用

[email protected]
包

  1. 安装craco和craco-alias

    npm install @craco/craco --save
    和
    npm i -D craco-alias

  2. 在根目录下创建

    tsconfig.paths.json

    {
    "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
           "@components/*" : ["./components/*"]
         }
    }
}

  3. 在 

    tsconfig.paths.json
     中扩展
    tsconfig.json

    { "extends": "./tsconfig.paths.json", //默认配置... }

  4. 在根目录下创建

    craco.config.js

    const CracoAlias = require("craco-alias");

module.exports = {
   plugins: [
     {
        plugin: CracoAlias,
        options: {
           source: "tsconfig",
           // baseUrl SHOULD be specified
           // plugin does not take it from tsconfig
           baseUrl: "./src",
           /* tsConfigPath should point to the file where "baseUrl" and "paths" 
           are specified*/
           tsConfigPath: "./tsconfig.paths.json"
        }
     }
  ]
};

  5. 中 

    package.json
    将 
    "start": "react-scripts start"
    与 
    "start": "craco start"

    交换

结果==> 不起作用！

我很困惑，因为我之前多次使用别名路径，但现在不起作用。我不想 

eject
我的应用程序，但使用别名路径很有帮助。

reactjs typescript create-react-app alias
3个回答
4
投票

我能够在几天前创建的 Typescript CRA 中使其协同工作（typescript + eslint）。我就是这样做的：

来自

package.json
的选定部门：

# react: 17.0.2
# eslint: 8.6.0
# react-scripts: 5.0.0
# eslint-import-resolver-babel-module 5.3.1

安装模块解析器

yarn add eslint-import-resolver-babel-module --dev

配置

tsconfig

我没有

tsconfig.paths.json

// tsconfig.json
{
  "compilerOptions": {
    //...youCompilerOptions
    "baseUrl": "src"
  },
  "include": ["src"]
}

网络包

创建新文件或添加到现有文件 

webpack.config.js

// webpack.config.js
module.exports = {
  resolve: {
    extensions: ["ts", "tsx", "js", "jsx"],
    alias: {
      components: path.resolve(__dirname, "src/components"),
    },
  },
};

eslint

终于

.eslintrc.json

// .eslintrc.json
{
  // ...yourConfig
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"],
        "moduleDirectory": ["node_modules", "src"],
        "alias": {
          "components": "./src/components"
        }
      }
    }
  },
}
4
投票

这里有一个解决方法

不再支持路径别名。

但是为了避免像

../../../
这样烦人的导入路径，您可以直接导入相对于
src
目录的文件

您可以执行以下操作

转到您的 

tsconfig.json
文件，添加基本 URL 为 
"."

"compilerOptions": {
    "baseUrl":".",
    ...

然后就可以直接导入相对于

src
目录的东西了

import utility from "src/Myfile.js"
0
投票

假设您的 React 应用程序是使用 

create-react-app
和 TypeScript 模板创建的，我确认以下步骤可以在最低配置下按预期工作。

  1. 安装配置覆盖的依赖项

    使用npm

    npm install -D @craco/craco craco-alias

    使用纱线

    yarn add -D @craco/craco craco-alias


    package.json

    看起来应该与此类似

    { 
  // ... 
  "devDependencies": {
    "@craco/craco": "7.1.0",
    "craco-alias": "3.0.1"
  }
}

  2. 在项目的根级别创建

    craco.config.js
    ，与
    tsconfig.json

    同级 
    const cracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: cracoAlias,
      options: {
        baseUrl: ".",
        source: "tsconfig",
        tsConfigPath: "./tsconfig.json",
      },
    },
  ],
};

    注意

    baseUrl
    中的
    craco.config.js
    应与
    baseUrl
    中的
    tsconfig.json

    相匹配

  3. 在 

    tsconfig.json

    中创建路径别名

    以下是 CRA 自动生成的典型 

    tsconfig.json
    。然后，在 
    paths
    内添加 
    compilerOptions
    属性。

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


    @/*: ["src/*"]
    表示它将用 
    @/
    替换路径前缀 
    src/
    。

    假设您有一个名为 

    MyComponent
    的组件，该组件是使用命名导出从 
    ./src/components/my-component.tsx
    导出的，您可以使用 import alias as

    导入该组件 
    import { MyComponent } from "@/components/my-component";

    将转换成

    import { MyComponent } from "./src/components/my-component";

    幕后。您还可以通过在 

    paths
     的
    tsconfig.json

    对象中添加额外属性来创建新别名

  4. 接下来，将 

    react-scripts
     的
    craco
     中的
    scripts
     替换为
    package.json

    {
  "name": "my-app",
  // ...
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
  // ...
}

  5. 最后测试导入别名

    使用npm

    npm run start

    使用纱线

    yarn start
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.