reactjs - Yeni bir TypeScript React uygulaması oluştururken takma adlı importlar artık desteklenmiyor

Aşağıdaki komutla [email  ve [email  kullanarak yeni bir React-typescript uygulaması oluşturdum:

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

Sonra, daha önce defalarca yaptığım gibi takma ad yolunu tanımlamaya karar verdim. Uygulamamın kök dizininde tsconfig.paths.json dosyasını oluşturdum.

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

Sonra tsconfig.json dosyasına extend özelliğini ekledim:

{
  "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"
  ]
}

Ayrıca, [email kurdum ve config-override.js dosyasını oluşturdum:

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;
}

Bu yüzden IDE'mi (VSCode) tekrar açtım ve npm start komutunu çalıştırdım. Başlatma komutunu çalıştırmadan önce package.json dosyasındaki scriptleri değiştirdiğimi belirtmeliyim.

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

Başlatma komutunu çalıştırdıktan sonra, terminalde bu mesaj görüntülendi ve derleme başarısız oldu:

tsconfig.json dosyanıza aşağıdaki değişiklikler yapılmaktadır: -compilerOptions.paths ayarlanamaz (takma isimli içe aktarmalar desteklenmez)

*Derlenemedi.

./src/App.tsx Modül bulunamadı: 'components' çözümlenemiyor .......*

Bu sorunu çözmek için araştırmaya başladım. Aşağıda bazılarını belirteceğim birçok yaklaşım buldum:

1. jsconfig.json dosyanıza gidin ve temel URL'yi "." olarak ekleyin

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

Sonra src dizininden doğrudan öğeleri içe aktarabilirsiniz

import Myfile from "src/myfile.js"

Sonuç ==> ÇALIŞMADI!

2. Bu problem, yeniden yönlendirme için bir takma ad ile çözülür. Önce react-app-rewire-alias paketini yükleyin, ardından config-override.js dosyasını oluşturun:

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

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

Sonuç ==> ÇALIŞMADI!

3. [email paketini kullanma

  1. Craco ve craco-alias kurun npm install @craco/craco --save ve npm i -D craco-alias

  2. Kök dizinde tsconfig.paths.json oluşturun

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

  3. tsconfig.json içinde tsconfig.paths.json dosyasını genişlet

    { "extends": "./tsconfig.paths.json", //varsayılan yapılandırmalar... }

  4. Kök dizinde craco.config.js oluşturun

    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 içinde "start": "react-scripts start"'i "start": "craco start" ile değiştirin

Sonuç ==> ÇALIŞMADI!

Kafam karıştı çünkü daha önce alias yolunu birçok kez kullandım, ama şimdi çalışmıyor. Uygulamamı eject etmek istemiyorum ama alias yolunu kullanmak faydalı.

Cevap #1

İşte bir çözüm yolu

Yol takma adları artık desteklenmiyor.

Ama ../../../ gibi can sıkıcı import yollarından kaçınmak için dosyaları doğrudan src dizinine göre import edebilirsiniz

Şunları yapabilirsiniz

tsconfig.json dosyanıza gidin ve base URL'i "." olarak ekleyin

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

Sonra src dizinine göre dosyaları doğrudan içe aktarabilirsiniz

import utility from "src/Myfile.js"

Cevap #2

Birkaç gün önce oluşturulmuş Typescript CRA'da hepsini bir arada (typescript + eslint) çalıştırmayı başardım. Bunu şöyle yaptım:

package.json dosyasından seçilen bağımlılıklar:

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

Modül çözücüyü yükle

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

Konfigürasyon

tsconfig

Hiç tsconfig.paths.json dosyam yok

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

webpack

Yeni bir dosya oluşturun veya mevcut webpack.config.js'ye ekleyin

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

eslint

Son olarak .eslintrc.json

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

İlgili makaleler