带有反应、反应应用程序重新布线和打字稿的绝对路径 [英] absolute path with react, react-app-rewire and typescript

问题描述

我正在使用 create-react-app + 打字稿，我想添加绝对路径.

i'm using create-react-app + typescript, and i want to add absolute paths.

我正在努力达到可以使用绝对路径的程度，如下所示:

i'm trying to get to the point i can use absolute paths, like so:

代替 import x from '../../../components/shell/shell'

使用 import x from '@components/shell/shell';

这里是 tsconfig.json 文件:

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

我使用扩展文件作为路径，因为出于某种原因npm start 覆盖了该文件.paths.json 文件也是如此:

I'm using extended file for paths, because from some reason npm start overrides the file. so is paths.json file:

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

我还有一个 .env 文件:

NODE_PATH=src

我安装了 react-app-rewire 所以我可以配置路径，我的 config-ovverrides.js 文件如下所示:

i installed react-app-rewire so i can config the paths, and my config-ovverrides.js file looks like this:

module.exports = {
  paths: function(paths, env) {
    // ...add your paths config
    return paths;
  }
};

我坚持连接所有的点，它不起作用，我仍然看不到我需要做什么来配置 webpack 路径对象；

im stuck with connecting all the dots, it doesn't work and i still cant see what i need to do in order to config the webpack path object;

如何在 cra、ts 和 rewire 中实现路径?

how can i implement paths in cra, ts, and rewire?

推荐答案

你可以使用5个简单的步骤无需弹出来解决:

You can solve it using 5 simple steps withou eject:

第 1 步:将 react-app-rewired 添加到您的 devDependencies 中.

yarn add -D react-app-rewired 或 npm intall react-app-rewired --save-dev

Step 1: Adding react-app-rewired into your devDependencies.

yarn add -D react-app-rewired or npm intall react-app-rewired --save-dev

第 2 步:安装后，您将能够将 package.json 默认 ReactsJS 脚本更改为:

Step 2: After installation, you'll be able to change package.json default ReactsJS scripts to:

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

步骤 3:在根路径上创建一个名为 tsconfig.paths.json 的新文件，内容如下:

Step 3: Creates a new file called tsconfig.paths.json on root path, with content like:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "services/*": ["./src/shared/services/*"],
      "interfaces/*": ["./src/shared/interfaces/*"]
    }
  }
}

提示 1:您可以选择要使用的路径，例如:@services、@interface、@src、~、@ 等 只需更改paths"中的键即可:{}

Tip 1: you can choose which path you want to use, like: @services, @interface, @src, ~, @, etc just by changing the keys inside "paths": {}

同样适用于它的值:["src/shared/services/"], ["src/shared/interfaces/"], [";src/*"]，这里使用相对路径.

The same is applied to it's value: ["src/shared/services/"], ["src/shared/interfaces/"], ["src/*"], use the relative path here.

第四步:进入tsconfig.json，在"compilerOptions"之前需要扩展tsconfig.paths.json 你刚刚创建的.

像这样:

Step 4: Into tsconfig.json, before "compilerOptions" you need to extends the tsconfig.paths.json you just created.

Like this:

{
  "extends": "./tsconfig.paths.json",
  ...//rest of file infos compilerOptions, include... whatever
}

第 5 步:创建一个新文件 config-overrides.js，在其上添加您的别名和相对路径:

Step 5: Creates a new file config-overrides.js, adding your alias and relative paths on it:

const path = require('path');

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: {
      ...config.alias,
      'services': path.resolve(__dirname, 'src/shared/services'),
      'interfaces': path.resolve(__dirname, 'src/shared/interfaces')
    },
  };

  return config;
};

提示 2:如果您使用的是 eslint，请记住有一个 .eslintignore 文件并添加config-overrides.js 在其中.

重启你的 IDE 或文本编辑器，在我的例子中是 VSCode.

Tip 2: If you're using eslint, remember to have an .eslintignore file and add config-overrides.js within it.

Restart your IDE or text editor, in my case VSCode.

它完成！现在只需运行 yarn start 或 npm run start

It's DONE! Now just run yarn start or npm run start

这篇关于带有反应、反应应用程序重新布线和打字稿的绝对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！