react，react-app-rewire和Typescript的绝对路径

debugcn 发表于 Dev

塔米罗斯

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

我试图达到可以使用绝对路径的地步，就像这样：

代替 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会覆盖该文件。path.json文件也是如此：

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

我也有一个.env文件：

NODE_PATH=src

我安装react-app-rewire好了，所以我可以配置路径，而我的config-ovverrides.js文件看起来像这样：

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

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

如何在cra，ts和rewire中实现路径？

古斯塔沃·格雷夫（Gustavo Graeff）

您可以使用解决它5个简单步骤withou弹出：

第1步：将react-app-rewired添加到您的中devDependencies。

yarn add -D react-app-rewired要么npm intall react-app-rewired --save-dev

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

"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在根路径上创建一个新文件，其内容如下：

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

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

它的值也是如此：在此处使用相对路径。["src/shared/services/"], ["src/shared/interfaces/"], ["src/*"]

步骤4：进入tsconfig.json，在"compilerOptions"您需要扩展tsconfig.paths.json刚刚创建的之前。

像这样：

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

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

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）。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。